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

素子幅の負の半分はそこにあなたを取得します。

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