CSS3圖像旋轉和重新定位，以適應DIV

Question

我會用JS小提琴開始：

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，180deg或270deg但總是移動該圖像頂部的#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 

Check Fiddle