javascript - divに収まるようにCSS3画像の回転と再配置

Question

JS Fiddle から始めます。

http://jsfiddle.net/zy2xy/4/

<div id="page" style="position: relative; background: #ccc; width: 500px; height: 600px;">
    <div id="container" style="top: 50px; left: 100px; width: 200px; height: 200px; position: absolute; background: #fff;"> 
        <img src="http://lorempixel.com/200/100/">
    </div>
</div>​​​​​​​​​

ページ全体の div#pageがあり、その中に別の div が#container絶対に対して配置されてい#pageます。

私が達成したいのは、その中の画像を回転させるか90deg、常にその画像を の左上隅に移動することです。180deg270deg#container

少し試してみましたtransform-originが、解決策が見つかりませんでした。

Answer 1

position:absolute画像に設定する

次に、角度を計算します。90または270の場合は、画像の左側と上部の属性を設定します。

コード

$('a').click(function(e) {
    e.preventDefault();
    var angle = $(this).attr("id");
    console.log("angle");
    var $container = $('#container');
    var left = 0;
    var top = 0;
    if(+angle === 90 || +angle === 270){
        top = 50;
        left = -50;
    }
    $("#my_image").css({
      transform: 'rotate('+angle+'deg)',
      '-moz-transform': 'rotate('+angle+'deg)',
      '-webkit-transform': 'rotate('+angle+'deg)',
        'top' : top + 'px',
        'left' : left + 'px'
    });
}).click();​  // Fire click on DOM ready

フィドルをチェック