我将从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
,但我找不到任何解决方案。
答案 0 :(得分:3)
将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 强>