我有一个使用 -webkit-transform:rotate(45deg) 旋转的 div 元素。如果我尝试像这样旋转后访问它的当前位置
var x = $('#tap-area').offset().left;
var y = $('#tap-area').offset().top;
它返回的不是原始左上角的实际值,而是整个 div 边界框的左上角(物理上最远的左上角,在 DIV 之外)。
如何计算/获取div旋转后的原始左上角
例如: 如果我将其旋转 90 度,我现在想要获得的值将位于右上角。 如果我将其旋转 180 度,我现在想要获得的值将是右下角。
我需要这个,所以我可以设置另一个 DIV 元素以始终保持附加到元素的原始左上角,以便它会根据其旋转方式更改其位置。
谢谢。
最佳答案
您始终可以使用以下方法获取元素的绝对位置:
<element>.getBoundingClientRect()
这将为您提供以屏幕左上角为原点的 AABB(轴对齐边界框,或最小-最大-框)。 (MDN)
如果您需要访问元素左上角的位置,您也可以旋转其原始位置向量,这是一个简单的矩阵乘法。您应该记住,旋转中心默认是元素的中心,但也可以使用 css 将其设置为不同的位置。
祝你好运!
关于JavaScript/jQuery : How to get actual original position of an element (DIV) after it's been rotated,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15924192/