Question

我在使用JavaScript旋转包裹在div中的图像时遇到了一个奇怪的定位问题。将图像旋转90度或270度时，图像突然高出其父div的50px和50px。对于0或180度，它就可以了。

这就是我在做的事情：

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
</head>
<body>
    <div id="crop_container" style="width:400px; height:400px; border:solid 1px;">
        <img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc6/249740_10150195623627623_506197622_7383520_7286937_n.jpg" style="display:block; position:relative; width:400px; height:400px;" />
    </div>
    <script language="JavaScript">
    var $cropContainer =  $("#crop_container");
    var $cropImage =  $("#crop_container img");
    var degrees = 90;

    $cropImage.css({"width":400, "height":300});
    $cropContainer.css({"width":300, "height":400});
    $cropImage.css({"-webkit-transform":"rotate("+degrees+"deg)","-moz-transform":"rotate("+degrees+"deg)"});
    //$cropImage.css({"top":50, "right":50});
    </script>
</body>
</html>

现在，当你从最右边和右边校正50px的最后一个css调整线时，它工作正常，但我不知道为什么会发生这种情况？

非常感谢任何建议！

谢谢！乔尼

Answer 1

将风景图像旋转90度进入纵向图像时，它将使其保持居中于原始位置。由于您的宽度和高度彼此相差100个像素，因此变换将差异分配到顶部和底部，即50像素来自的位置。

Answer 2

这取决于您的期望。它围绕图像的中点旋转，而不是矩形。

中点占位符：(150, 200)
中点图片：(200, 150)。

确实存在50px差异。您可以通过翻译来改变旋转之前旋转的中点：

translate(-50px, 50px) rotate("+degrees+"deg)

使图像中点变为(200 - 50, 150 + 50) (150, 200)，即你想要的。

http://jsfiddle.net/4UUJN/2/

在Javascript中旋转图像时奇怪的定位问题

2 个答案: