CSS3图像旋转和重新定位以适应div

Question

CSS3图像旋转和重新定位以适应div

3

我将从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，里面还有另一个

#container

相对于#page进行了绝对定位。

我的目标是旋转图片以使其内部旋转90度、180度或270度，但始终将该图像移动到#container的左上角。

我尝试过使用transform-origin，但是我找不到任何解决方案。

- blid

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sushanth -- · Accepted Answer

将图片的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