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

$(myElem).position().left

......传递错误的价值观。

这是一张显示我的意思的图片 rotateddiv http://www.dasprinzip.com/bitsandpieces/setup.jpg

怎么办？

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

希望这有帮助

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

1 个答案: