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

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/的span在小提琴是测试如果该值是正确的。 给它一个由公式计算的高度，看它是否与橙色框的角相匹配。

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

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

我现在没有太多时间去弄清楚x位置并提供更详细的例子，但是当我明天找到时间时，我会用更多的测试，细节和x值来更新我的答案。

希望这可以帮助