css - 旋转对象上的底部填充动画如何导致 -DIAGONAL- 运动？

Question

我正在尝试在页面的 elft 侧做一个小反馈选项卡。我创建了一个 div，将其旋转了 90 度，然后将其放在页面的左侧。到目前为止，一切都很好。然后我想在悬停时添加一点动画。所以我只增加了一点底部填充，但选项卡沿对角线移动....../：
这是一个有问题的CodePen。

我如何解决它？！谢谢。:)

Answer 1

当你变换一个元素时，除非另有说明，否则原点是中心。但是，如果您添加padding-bottom，那么您将中心向下移动。这会导致旋转基于不同的点，从而导致对角线移动。

尝试使用transform-origin:0 100%;相对于左下角定位变换。您需要调整您的left和top值，但是当您增加底部填充时，您应该不会再看到问题。