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

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

css-transforms css-transitions css3 css

DanMad · 技术社区 · 7 年前

这个问题已经有了答案:

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

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

事先谢谢!

2 回复 | 直到 7 年前

Rishabh Anand 7 年前

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

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

可转换为

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

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

-1

epresas 7 年前

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

推荐文章

Luckkks · 过渡色工作不正常

1 年前

BogisW · CSS动画按钮/悬停时为span内容文本添加CSS转换

2 年前

markisawesome4 · 按钮:当您将鼠标移离按钮时,悬停时显示的内容下移后

2 年前

Bruno Oliveira · 如何在CSS转换完成后调用函数-React

2 年前

Ancross · 为什么我的小CSS动画不会触发?

4 年前

Jorge · :before和:after伪元素以接收过渡效果

8 年前

Arsalan Khattak · 线性渐变过渡

8 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

8 年前

Paul · 悬停时变换比例不缩放

8 年前

Willem van der Veen · CSS转换结合JS clickEvent

8 年前