元素在使用transform:rotate旋转后，如何获得其绝对定位？

Question

我尝试使用了jquery中的offset()，但这得到的数据很奇怪，这个位置似乎会随着旋转而逐渐偏离元素的左上角，请问还有别的方法可以得到这个旋转元素的绝对定位吗？

很抱歉我不能给出任何例子，但我觉得这个问题描述得还算清晰，如果有需要的话，我愿意补充更多信息

编辑：我截图了屏幕以显示我遇到的问题，图中，我将右侧的圆点逆时针旋转了120度，其中红色的正方形是这个黑色长方形的offset位置，代码如下：

var left = $(line_inner).offset().left
var top = $(line_inner).offset().top
$("#pointer").offset({
    left: left,
    top: top,
})

我想知道如何让这个红色的正方形的位置随着黑色长方形一起改变，并始终在其左上角。当然，如果能够知道这个红色正方形的位置移动规律，并可以以此求得黑色长方形的某个固定位置，我也可以使用。

编辑2：AI的回答并没有效果，它给出的函数与JQuery提供的.offset()效果相同，返回的值仍然会受到旋转的影响。
我最后通过在这个黑色长方形外包裹一层没有实际大小的父元素解决了这个问题，这个父元素的绝对定位始终在黑色长方形的左上角，但我希望得到我的问题的答案，我认为经过那么久的发展，或许我们有一个更简单的或直观的方法解决这个问题。

Answer 1

元素transform之后，其位置实际上还在原地，大小实际上也没有变化，所以 offset 不受影响。这也是做动画的时候使用 transform 代替修改真实尺寸可以提升性能的原因——它不改变布局，不会引起回流或者重绘。

在二维坐标系上做线性矩阵变换的时候，如果没有发生位移，那么无论怎么变换，坐标原点 [0,0] 的位置都是不会变的：

$$ \begin{bmatrix} a_1 & b_1 & 0 \\ a_2 & b_2 & 0 \\ 0 & 0 & 0 \end{bmatrix} \begin{bmatrix} 0\\ 0\\ 1 \end{bmatrix} \equiv \begin{bmatrix} 0\\ 0\\ 1 \end{bmatrix} $$

在 CSS 中，这个坐标原点默认在{position: relative;left: 0; top: 0}所在位置，可以通过修改 transfrom-origin 的值来控制此原点位置，例如 transfrom-origin:center就可以实现元素旋转而不偏离自己的中心位置。

如果期望两个元素绕着同一个中心点旋转的话，需要从黑色正方形的尺寸和offset计算出确切的变换原点坐标，然后赋值给红点的transform-origin（红点不旋转只需要定点的话，可以直接设置为其位置left&top）。