如何在旋转对象上进行底部填充动画导致-DIAGONAL-运动？

Question

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

我该如何解决？！ 谢谢。 ：）

Answer 1

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

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