CSS过渡rotation()而不是translate()

时间:2018-09-27 04:53:10

标签: css css3 css-transitions css-transforms

我正在元素上同时使用rotate()translate()属性。我有非常具体的转换要求,我需要转换元素的rotate()属性而不是translate()属性。有没有一种方法可以在transition属性上声明rotate()而不在translate()属性上声明。到目前为止,通过CSS将transform属性下的两个属性进行合并,事实证明这很棘手。

谢谢!

2 个答案:

答案 0 :(得分:1)

执行此操作的一种方法是使用可以表示平移和旋转的单个属性。 2D转换下的matrix属性可能会在这里为您提供帮助。

rotate(45deg) translate(24px,25px);

可以转换为

matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707108, 34.6482);

可以使用以下矩阵分辨率实现此转换:The Matrix Resolutions
希望这会有所帮助。

答案 1 :(得分:-1)

我不认为您可以做您想做的事,但请查看此question,这种方法可能会让您感兴趣,包装您的元素,然后将一个转换应用于包装器,然后将另一转换应用于实际元素,那样您可以转换所需的转换。希望对您有所帮助!