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;