CSS转换rotate()和not translate()

Question

我在一个元素上同时使用了rotate()和translate()属性。当我需要转换元素的rotate()属性而不是translate()属性时，我有非常具体的转换需求。有没有一种方法可以在rotate()属性上声明transition而不在translate()属性上声明它。到目前为止，CSS将transform属性下的两个属性合并在一起，这被证明是很棘手的。

提前感谢！

Answer 1

我不认为你可以做你想做的事情，但是看看这个question，这个方法可能会让你感兴趣，包装你的元素，然后将一个转换应用到包装器，另一个转换到实际的元素，这样你就可以转换你想要的转换。我希望它能有所帮助！

Answer 2

要做到这一点，一种方法是使用同时表示平移和旋转的单个属性。2D变换下的矩阵属性可能会在这方面对您有所帮助。

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

可以转换为

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

这种转换可以使用矩阵分辨率来实现：The Matrix Resolutions

希望这能帮上忙。