对齐在CSS中旋转的元素 [英] Aligning an element rotated in css

问题描述

我试图在页面上旋转div并将其直接靠在其父元素（在本例中为body）的左侧。我知道转换原点，但是无论插入什么值都无法正确对齐。

I trying to rotate a div on a page and have it rest right up against the left side of its parent element (the body in this case). I know about transform-origin but no matter what values I insert it doesn't align correctly.

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？

This is driving me mad. Can anyone get the rotated element aligned to top: 0, left:0 in the body when rotated?

推荐答案

围绕元素的中心，其不与左对齐：0。

Since the rotation is around the center of the element, its not aligned with left: 0.

使用：

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

元素宽度的负一半会带您到达那里。

the negative half of element width gets you there.

正在使用示例。

这篇关于对齐在CSS中旋转的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！