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

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

css-transforms css-transitions css3 css

DanMad · 技术社区 · 6 年前

这个问题已经有了答案:

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

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

事先谢谢!

2 回复 | 直到 6 年前

Rishabh Anand 6 年前

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

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

可转换为

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

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

-1

epresas 6 年前

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

推荐文章

Jam3sn · 变量旋转文本的绝对位置

7 年前

John Balvin Arias · 当css transform:scale()处于活动状态时,单击边框按钮会触发单击

7 年前

Joshua Leung · 如何旋转文本并固定到右下角?

7 年前

marius · jQuery UI可选css转换问题

7 年前

jean-max · 矩形中的菱形HTML和CSS3

7 年前

Eugenio · 无极旋转DIV,但具有绝对定位

7 年前

Boucherie · CSS/SCSS rails转换div,但不是嵌套图像(rails)

7 年前

akhil regonda · 如何使用transform scale删除屏幕上显示的滚动条?

7 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

7 年前

Scoob · 在flexbox中不工作的锚点元素上变换比例

7 年前