对齐以css旋转的元素

Question

我试图在页面上旋转一个div并让它靠在其父元素的左侧(在这种情况下为正文).我知道变换原点,但无论我插入什么值,它都没有正确对齐.

http://jsfiddle.net/QpHCM/

HTML

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

CSS(Sass)

$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;
}

这让我很生气.任何人都可以将旋转的元素对齐到顶部:0,左边:旋转时身体中的0？

Answer 1

由于旋转位于元素的中心附近,因此它不与左对齐:0.

使用:

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

元素宽度的负半部分可以帮到你.

工作实例.