对齐CSS中旋转的元素

我尝试旋转页面上的 div 并将其靠在其父元素（在本例中为主体）的左侧。我了解变换原点，但无论我插入什么值，它都无法正确对齐。

http://jsfiddle.net/QpHCM/ http://jsfiddle.net/QpHCM/

HTML

<div class="handle">Text</div>

CSS（萨斯）

$transform: rotate(90deg);
$transform-origin: 0 0;

body {
    border: 1px solid red;
}

.handle {
    width: 50px;
    height: 15px;
    background: blue;
    color: white;
    text-align: center;
    padding: 5px;
    line-height: 15px;
    transform: $transform;
    -moz-transform: $transform;
    -webkit-transform: $transform;
    transform-origin: $transform-origin;
    -moz-transform-origin: $transform-origin;
    -webkit-transform-origin: $transform-origin;
}

这让我抓狂。任何人都可以将旋转后的元素在旋转时与正文中的 top: 0, left:0 对齐吗？

由于旋转是围绕元素的中心进行的，因此它不与 left: 0 对齐。

use:

$transform: rotate(90deg) translate(0, -25px);

元素宽度的负一半可以让你到达那里。

working example http://jsfiddle.net/QpHCM/2/.