我将从 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
设置为图片
然后计算 Angular 。如果是 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
关于javascript - CSS3 图像旋转和重新定位以适应 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13649387/