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

时间:2013-06-18 06:29:00

标签: css css3 rotation transform

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

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

在线的所有答案仅涉及获取旋转矩形的位置而不是设置。

感谢。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

旋转后无法定位div。

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

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