将宽度/高度更改为 CSS 旋转的 div 会触发顶部/左侧重新定位答案

【问题标题】：Changing width/height to a CSS rotated div triggers top/left reposition将宽度/高度更改为 CSS 旋转的 div 会触发顶部/左侧重新定位
【发布时间】：2011-08-17 11:06:18
【问题描述】：

我有一个 <div>，它与 -webkit-transform(rotate66) 旋转了 66 度。当我执行调整大小、宽度或高度时，div 似乎改变了他的上/左坐标。实际的left/top CSS 属性并没有改变。我认为变换矩阵有问题。

有什么方法可以使旋转的<div> 在width/height 调整大小时“保持静止”？调整大小时应该应用左上角道具来对抗这种运动，但我似乎找不到正确的比例。

您可以在此处查看测试（仅限 Webkit）：http://jsbin.com/iqezoj/4/edit

谢谢

【问题讨论】：

标签： css webkit matrix rotatetransform

【解决方案1】：

您还需要指定-webkit-transform-origin 来控制where转换的来源。 Mozilla documentation 在这方面做得很好。

编辑 -webkit-transform-origin: 100px 50px; 在您的示例中将点移动到<div> 的中间。默认值为50% 50%，它将根据<div> 的高度和宽度而变化，这解释了位置发生变化的原因。

【讨论】：

已更新，解释了为什么它在没有指定来源的情况下被破坏。
唯一的问题是，在调整大小后，为了从中心执行新的旋转，您需要根据新的宽度和高度重新计算并设置新的原点，单位为 px。这会使 div 跳转。
你有什么不能正常工作的例子吗？我认为我了解您希望将形状固定在一个可以旋转和调整大小的点上。实际上，如果您将其作为另一个问题问可能会更好？这听起来像是一个后续问题。
没错，我希望能够旋转和调整它的大小而不会让它跳动。旋转应该从中心发生。抱歉，我现在没有示例。谢谢