旋转后获取元素的顶部和左侧位置答案

【问题标题】：Get elements top and left position after being rotated旋转后获取元素的顶部和左侧位置
【发布时间】：2013-08-11 16:09:39
【问题描述】：

当我通过

旋转一个元素时

myElem.css('-moz-transform', 'rotate(' + degree + 'deg)');
myElem.css('-webkit-transform', 'rotate(' + degree + 'deg)');
myElem.css('-o-transform', 'rotate(' + degree + 'deg)');
myElem.css('-ms-transform', 'rotate(' + degree + 'deg)');

我需要得到它正确的左/上位置...

myElem.getBoundingClientRect().left

...没有提供正确的 x/y 位置。以及 f.e.使用 jQuery...

$(myElem).position().left

...传递错误的值。

这是一张图片来说明我的意思
_{（来源：dasprinzip.com）}

怎么办？

【问题讨论】：

你期望它是什么，你会得到什么？
这就是你要找的东西：stackoverflow.com/questions/9795816/…
添加了一张图片以可视化含义...
所以你想让它投递橙色框的左上角？

标签： javascript jquery css css-transforms

【解决方案1】：

我为您编写了一个 JSFiddle，希望它可以为您提供解决所有问题的要素： http://jsfiddle.net/pM54e/2/ Fiddle中的span是为了测试值是否正确。给它通过公式计算的高度，看看它是否与橙色框的角匹配。

var numY = Math.abs(myElem.position().top + sign*( (myElem.outerHeight() / 2) - Math.sin(degree)));

这将确定旋转元素左上角的 Y 位置。请记住，(myElem.outerHeight() / 2) 是您元素的 transform-origin。默认为元素高度和宽度的 50%。如果更改原点，则必须更改公式中的值。

我现在没有太多时间来计算 x 位置并提供更详细的示例，但是当我明天有时间时，我会用更多测试、细节和 x 值更新我的答案。

希望对你有帮助

【讨论】：