css - 对齐在CSS中旋转的元素

Question

我试图在页面上旋转一个 div 并让它正好靠在其父元素(在本例中为主体)的左侧。我知道 transform-origin，但无论我插入什么值，它都不会正确对齐。

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

这让我发疯。任何人都可以让旋转后的元素在旋转时与 body 中的 top: 0, left:0 对齐吗？

Answer 1

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

使用:

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

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

工作 example .