CSS：画像を回転して左上に揃えます

Question

内に正しく配置されるように画像を回転させようとしています。つまり画像の左上隅をdiv。

here（ - >[rotate]をクリックしてください）これは動作しません。これを修正する方法はありますか？

（私は回転画像のオフセットをハードコーディングすることはできませんので、私はオンラインの画像ビューアでこれを使用しているだろうことに注意してください。そこに類似の質問がたくさんありますが、私はこの正確な質問を見つけていません。）

Answer 1

私は単純な方法があるかどうかわかりませんが、このような回転の後に画像のマージンを設定することができます。

margin:68px -66px; 

イメージの幅と高さを取得するためにjsを使用すると、イメージのサイズに応じて値が設定されます。私は手動で方法を使用しました。

http://jsfiddle.net/YQktn/3/

EDIT：

あなたは

-webkit-transform-origin: 75px 75px; 
-moz-transform-origin: 75px 75px; 
-ms-transform-origin: 75px 75px; 
-o-transform-origin: 75px 75px; 
transform-origin: 75px 75px; 

と常に混乱ここに見られるようにすることができます：いくつかのjQueryを使用してCSS "transform: rotate()" affecting overall design with "position: absolute" (not aligning properly)

Answer 2

を、あなたが引く、親のoffsetを得ることができますそれは新しい回転したoffsetからのもので、余白を使ってそれをコンテナに戻します。それはすべての回転で動作します。ここにはthe Fiddleがあります。

JS：画像を「再調整」するためにJavaScriptを使用していないよりも簡単な方法があることは、これまで私はそれを取る与えられた答えから

function rotate(elm, deg) { 
    var offsetContLeft, offsetContTop, offsetLeft, offsetTop, newLeft, newTop; 
    $(elm).css('transform', 'rotate('+ deg +'deg)'); 
    // Get the container offset 
    offsetContLeft = $(elm).parent().offset().left; 
    offsetContTop= $(elm).parent().offset().top; 
    // get the new rotated offset 
    offsetLeft = $(elm).offset().left; 
    offsetTop = $(elm).offset().top; 
    // Subtract the two offsets. 
    newLeft = offsetContLeft - offsetLeft; 
    newTop = offsetContTop - offsetTop; 
    // Apply the new offsets to the margin of the element. 
    $(elm).css('margin-left', newLeft).css('margin-top', newTop); 
} 

$("#myrotate").click(function (e) { 
     // pass in the element to rotate and the desired rotation. 
     rotate('#myimage', 90); 
}); 

Answer 3

。私はので、私が使用して終了したアプローチを共有しましょう：

var step = 0; 

$("#myrotate").click(
    function (e) { 
    step += 1; 
    var img = $("#myimage"); 
    img.css('transform', 'rotate('+ step*90 +'deg)'); // could be extended to work also in older browsers 
    var d = img.width() - img.height(); 
    img.css('margin-left', -d/2*(step%2)); 
    img.css('margin-top', d/2*(step%2)); 
    } 
); 

myrotatemyimageが回転する（推測）imgのidで、私はスイッチとして虐待<a>のidです。

お試しくださいhere

Answer 4

あなたはそれがCSSで行うことにしたい場合は、これは方法です：

.rot90 { 
    -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */ 
    -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */ 
    /*-moz-transform-origin: right top; */ 
    -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */ 
    -o-transform: translateY(-100%) rotate(90deg); /* Opera */ 
    transform: translateY(-100%) rotate(90deg); /* W3C */ 
    -webkit-transform-origin: left bottom; 
    -moz-transform-origin: left bottom; 
    -ms-transform-origin: left bottom; 
    -o-transform-origin: left bottom; 
    transform-origin: left bottom; 
} 

updated demo

トリックは左下隅を中心に画像を回転させることです。一旦終わったら、それは高さの100％だけ下がります。それを翻訳して、今は大丈夫です。

逆回転のための同じ効果を得るには：あなたのdivにプロパティ..：（ホバーを変換するために）

div:hover #myimage { 
 
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */ 
 
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */ 
 
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */ 
 
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */ 
 
    transform: translateX(-100%) rotate(-90deg); /* W3C */ 
 
    -webkit-transform-origin: top right; 
 
    -moz-transform-origin: top right; 
 
    -ms-transform-origin: top right; 
 
    -o-transform-origin: top right; 
 
    transform-origin: top right; 
 
}

<div style="border: 1px solid red;"> 
 
    <img id="myimage" src="http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" style="border: 3px solid silver;" /> 
 
</div>