回転した画像をコンテナ内に配置するにはどうすればよいですか？

Question

CSS3、HTML（必要な場合やJavaScript/jQueryの）を使用して、私がイメージに270分の90度回転させるとその親DIV /容器を満たすために、それポジションを持っている必要があります。シンプルに聞こえますが、画像が回転すると位置が変わり、その理由や理由がわかりません。 http://jsfiddle.net/UPGkU/2/ - -

は、ここで説明するjsFiddleである私はちょうど青いロゴが正確に赤のdiv内の位置になりたいです。もちろん

、私は特定のオフセットを使用することができますが、別の画像が使用されている場合、それらのオフセットが変化するので、私は本当に一般的な解決策を見つけたいです。

すべてのヘルプは素晴らしいだろう、ありがとう！このシナリオでは、画像を回転させますその周りのポイントを -

Answer 1

はあなたがtransform-originを設定する必要が

#image { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: 0 100%; 
    position : relative; 
    top  : -50px; 
} 

Answer 2

てみてください。

#image { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: 0 0; //initially 50% 50% 
    margin-left: 100%; 
} 

90deg fiddle/270deg fiddle

更新：

後者との課題は、その位置がまだを変えないに相対的であると私たちは本当にtransform-originを変更することができないということですマージン値（でも垂直なもの）をa percentage always relative to the width of the containing blockのように計算されるための要素と、私たちはただmargin-top:100%を設定することはできません。次のコードは動作するはずです：

#image { 
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin: 0 0; 
    position:relative; 
    top:100%; 
} 

Answer 3

こんにちは、今が使用されるこのCSS

#wrapper { 
    width:50px; 
    height:150px; 
    border:2px solid red; 
    position:relative; 
} 
#image { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    position:absolute; 
    left:-49px; 
    top:50px; 
} 

Demo