gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:20:33 28 4
gpt4 key购买 nike

我正在尝试在我的页面的 elft 一侧做一个小的反馈选项卡。我创建了一个 div,将其旋转 90 度,然后将其放置在我页面的左侧。到目前为止,一切都很好。然后我想在悬停时添加一点动画。所以我只增加了底部填充一点,但标签沿对 Angular 线移动.../:
Here's a CodePen with the problem.

我该如何解决?!谢谢。 :)

最佳答案

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

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

关于css - 旋转对象上的底部填充动画如何导致 -DIAGONAL- 运动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15984042/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com