我正在尝试在页面的上方做一些反馈标签。
我创建了一个div，将其旋转了90度，然后将其拍到了页面的左侧。到目前为止，一切都很好。然后我想在悬停上添加一些动画。所以我只增加了底部填充部分，但是标签沿对角线移动... /：
Here's a CodePen with the problem.
我如何解决它？！
谢谢。 :)
最佳答案
变换元素时，除非另有说明，否则原点为中心。但是，如果添加padding-bottom，则将中心向下移动。这导致旋转围绕不同的点进行，从而导致对角线移动。
尝试使用transform-origin:0 100%;相对于左下角放置变换。您需要调整left和top值，但是增加底部填充时您应该不再遇到问题。
关于css - 为什么旋转对象的底部填充动画会导致-DIAGONAL-运动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15984042/