對齊在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中旋轉的元素

回答

相關問題