[英]CSS3 image rotation and reposition to fit in div
我將從 JS Fiddle 開始:
<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
但找不到任何解決方案。
將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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.