JavaScript/jQuery : How to get actual original position of an element (DIV) after it's been rotated

Question

我有一个使用 -webkit-transform:rotate(45deg) 旋转的 div 元素。如果我尝试像这样旋转后访问它的当前位置

var x = $('#tap-area').offset().left;
var y = $('#tap-area').offset().top;

它返回的不是原始左上角的实际值，而是整个 div 边界框的左上角(物理上最远的左上角，在 DIV 之外)。

如何计算/获取div旋转后的原始左上角

例如:如果我将其旋转 90 度，我现在想要获得的值将位于右上角。如果我将其旋转 180 度，我现在想要获得的值将是右下角。

我需要这个，所以我可以设置另一个 DIV 元素以始终保持附加到元素的原始左上角，以便它会根据其旋转方式更改其位置。

谢谢。

Answer 1

您始终可以使用以下方法获取元素的绝对位置:

<element>.getBoundingClientRect()

这将为您提供以屏幕左上角为原点的 AABB(轴对齐边界框，或最小-最大-框)。 (MDN)

如果您需要访问元素左上角的位置，您也可以旋转其原始位置向量，这是一个简单的矩阵乘法。您应该记住，旋转中心默认是元素的中心，但也可以使用 css 将其设置为不同的位置。

祝你好运!