对齐在CSS中旋转的元素

我试图在页面上旋转div，并将其停留在其父元素（本例中为正文）的左侧。我知道变换原点，但无论我插入的值是否正确对齐。对齐在CSS中旋转的元素

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在体内旋转时？

来源

2013-10-04 Kylee

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

使用：

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

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

working example。

来源

2013-10-04 15:57:04 shem86

非常沮丧，这完全奏效。谢谢。 – Kylee

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

来源

2013-10-04 15:53:14

尝试将该块内的“文本”更改为其他内容。它会中断。 – Pavlo

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

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

来源

2017-07-13 21:51:17 Adam

对齐在CSS中旋转的元素

回答

相关问题