javascript - 旋转后获取元素的顶部和左侧位置

Question

当我通过

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 位置。以及使用 jQuery 的 fe...

$(myElem).position().left

...提供错误的值。

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

该怎么办？

Answer 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 值更新我的答案。

希望这可以帮助