Question

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

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

元素宽度的负半部分可以帮助你。

工作example。

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)+'%)');
        }
    });

对齐以css旋转的元素

3 个答案: