CSS过渡旋转（）而不是翻译（）[重复]答案

【问题标题】：CSS transition rotate() and not translate() [duplicate]CSS过渡旋转（）而不是翻译（）[重复]
【发布时间】：2019-03-02 22:27:44
【问题描述】：

我在一个元素上同时使用rotate() 和translate() 属性。我有非常具体的转换要求，我需要转换元素的 rotate() 属性而不是 translate() 属性。有没有办法在 rotate() 属性上声明 transition 而不在 translate() 属性上声明它。到目前为止，由于 CSS 将transform 属性下的两个属性混为一谈，这已被证明是棘手的。

提前致谢！

【问题讨论】：

不，这是不可能的，因为您在这里只处理一个 CSS 属性。但是，只保留translate 的一部分有什么问题呢？如果你从rotate(foo) translate(baz) 转换到rotate(bar) translate(baz)，那应该会给你想要的结果，不是吗？

标签： css css-transitions css-transforms

【解决方案1】：

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

【讨论】：

【解决方案2】：

一种方法是使用一个可以同时表示平移和旋转的属性。 2D 变换下的矩阵属性可能只是在这里帮助你。

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

可以转换成

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

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

【讨论】：

抱歉，这对于仅转换旋转或平移之一无济于事。如果我们不能单独转换这些函数，实际上是因为使用的一个值是 matrix() 函数......一旦它被解析，UA 就会将其转换为矩阵等价物，并且变换的计算值总是“无”或“矩阵（a,b,c,d,e,f）”。