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

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

javascript

Javascript中旋转图像时的奇怪定位问题,javascript,rotation,Javascript,Rotation,在JavaScript中旋转包装成div的图像时，我遇到了一个奇怪的定位问题。将图像旋转90度或270度时，图像突然在父div上方50px，在父div右侧50px。旋转0度或180度即可这就是我正在做的： <html> <head> <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script&

在JavaScript中旋转包装成div的图像时，我遇到了一个奇怪的定位问题。将图像旋转90度或270度时，图像突然在父div上方50px，在父div右侧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>


变量$cropContainer=$（“作物容器”）；
变量$cropImage=$（“作物/容器img”）；
变异度=90；
$cropImage.css（{“宽度”：400，“高度”：300}）；
$cropContainer.css（{“宽度”：300，“高度”：400}）；
$cropImage.css（{“-webkit transform”：“rotate”（“+degrees+”deg）”，“-moz transform:“rotate”（“+degrees+”deg）”）；
//$cropImage.css（{“top”：50，“right”：50}）；

现在，当你用从上到右的50px的修正取消最后一行css调整时，它工作得很好，但我不知道为什么会发生这种情况

任何建议都将不胜感激

谢谢！

Joni

当你将一幅风景画旋转90度变成一幅肖像画时，它会将它保持在原始位置的中心。由于宽度和高度彼此相距100像素，因此变换会将差异分布到顶部和底部，这就是50像素的来源。

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

中点占位符：
```
（150200）
```
中点图像：
```
（200150）
```

事实上，存在着

50px

差异。通过平移，可以在旋转之前更改旋转的中点：

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

这样图像中点就变成了你想要的

（200-50150+50）

，也就是

（150200）

项目现在几乎完成&正在处理x-browser问题。我在IE8上遇到了麻烦。我正在使用HeyGrady 2D transfrom JQuery插件进行旋转，并按照您的建议为其提供翻译，这在FF/Chrome/Safari/IE9上运行良好。插件项目页面提到“IE也缺乏对transform origin和translate（）的支持[…]jQuery transform插件会自动处理这些计算”（请参阅：）。然而，它似乎没有这样做。有人知道问题出在哪里吗？@Joni:我认为你应该为此单独发布一个问题——没有人会真正注意到已经回答的问题的某个地方有评论。