旋转物体上的底部填充动画如何引起-DIAGONAL-移动？

Question

我正在尝试在我的页面的elft端做一点反馈选项卡。 我创建了一个div，将其旋转90度，并将其拍到我的页面的左侧。到现在为止还挺好。然后我想在悬停上添加一些动画。所以我只增加底部填充一点，但标签移动对角线... /：
Here's a CodePen with the problem.

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

Answer 1

当您转换一个元素时，除非另有指定，否则以原点为中心。但是，如果您添加padding-bottom，那么您正在将中心向下移动。这导致旋转基于不同的点，导致对角线移动。

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