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

元素`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`）。