代码之家 › 专栏 › 技术社区 › DanMad

css transition rotate()而不是translate()[重复]

css-transforms css-transitions css3 css

0

DanMad · 技术社区 · 6 年前

这个问题已经有了答案:

css3: two transitions with different timing functions (css3) 1个答案

我两者都用 rotate() 和 translate() 元素的属性。我有非常具体的转换要求,我需要转换 旋转() 元素的属性,而不是 翻译() 属性。有没有办法申报 transition 上 旋转() 属性而不在上声明 翻译() 属性。到目前为止,这已经被证明是一个棘手的问题,CSS将 transform 属性。

事先谢谢!

2 回复 | 直到 6 年前

1

Rishabh Anand 6 年前

一种方法是使用一个可以表示平移和旋转的单一属性。二维变换下的矩阵属性可能在这里对您有所帮助。

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

可转换为

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

这种转换可以通过矩阵分辨率实现: The Matrix Resolutions
希望这能有所帮助。

2

-1

epresas 6 年前

我觉得你不能做你想做的,但是看看这个 question ,该方法可能会让您感兴趣,包装元素并将一个转换应用于包装器,另一个应用于实际元素,这样您就可以转换所需的转换。希望有帮助!