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

Question

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

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

这让我发疯。任何人都可以让旋转的元素在旋转时对齐到身体的顶部：0，左侧：0？

Answer 1

由于旋转是围绕元素的中心，它不与左对齐：0。

利用：

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

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

工作示例。

Answer 2

检查我的解决方案（$transform-origin: 12px 11px;）： http: //jsfiddle.net/QpHCM/1/ 我实际上不知道为什么它会以这种方式工作，但它确实有效。

Answer 3

这是我为实现类似功能所做的工作。

var rotateStep = 0;
    $('#rotateIcon').click(function() {
        rotateStep += 1;
        var img = $("#rxImage");
        if(rotateStep % 4 == 0){
            img.css('transform-origin', 'top left');
            img.css('transform', 'rotate('+ rotateStep*90 +'deg) translate(0%, 0%)');
        }else if(rotateStep % 4 == 1){
            img.css('transform-origin', 'bottom left');
            img.css('transform', 'rotate('+ rotateStep*90 +'deg) translate(-'+(img.height() / img.width() * 100)+'%, 0%)');
        }else if(rotateStep % 4 == 2){
            img.css('transform-origin', 'bottom right');
            img.css('transform', 'rotate('+ rotateStep*90 +'deg) translate(100%, 100%)');
        }else if(rotateStep % 4 == 3){
            img.css('transform-origin', 'top right');
            img.css('transform', 'rotate('+ rotateStep*90 +'deg) translate(0%, -'+((img.width() / img.height()) * 100)+'%)');
        }
    });