用变换矩阵旋转后的CSS定位矩形答案

【问题标题】：CSS positioning a rectangle after rotated with transform matrix用变换矩阵旋转后的CSS定位矩形
【发布时间】：2013-06-18 06:28:59
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你无法在旋转后定位 div。

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

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

【讨论】：