css - 用变换矩阵旋转后的CSS定位矩形

Question

我正在使用 CSS 变换矩阵来旋转 div。应用旋转后，我想使用 css 'left' 和 'top' 定位 div。

问题是css定位忽略了旋转，并将矩形视为未旋转。例如，如果我将矩形旋转 90 度，然后将其设置为左 0px 和上 0px，它不会显示在容器的左上角。这将与我将原始矩形定位在 0,0 中然后旋转它的结果相同（它看起来像是在 10px、-5px 左右）。

网上所有的答案都只讨论获取旋转矩形的位置，而不是设置。

谢谢。

Answer 1

最终我用简单的逻辑解决了它：

newX = x - (originalWidth - boundedW) / 2;
newY = y - (originalHeight - boundedH) / 2;

Answer 2

旋转后无法定位 div。

您可以做的是定位您真正想要的角，然后将此位置设置为旋转中心。

如果你给出一个具体的例子，那么我可以给你一个更详细的答案。