gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 22:30:27 26 4
gpt4 key购买 nike

我在旋转包裹在 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>

现在,当您取消最后一个 css 调整线并从顶部和右侧校正 50px 时,它工作得很好,但我不知道为什么会这样?

如有任何建议,我们将不胜感激!

谢谢!琼妮

最佳答案

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

  • 中点占位符:(150, 200)
  • 中点图像:(200, 150)

的确,有 50px 的区别。你可以通过翻译改变旋转的中点before:

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

这样图像中点就变成(200 - 50, 150 + 50),也就是(150, 200),你想要的。

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

关于javascript - 在 Javascript 中旋转图像时奇怪的定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7235507/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com