Question

我正在使用一堆元素来构图背景图像，它们都是绝对定位的，可以自由旋转。

问题是，我想只转换那些对象的旋转，而不是顶部或左边的属性。显然transition: transform 30s;是不允许的。我有很棒的想法

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

但这也行不通。我该如何解决这个问题？

Answer 1

转换是供应商前缀

而不是

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

DO

-webkit-transition: -webkit-transform $amount-of-time ease-out;
-moz-transition:    -moz-transform $amount-of-time ease-out;
-o-transition:      -o-transform $amount-of-time ease-out;
-ms-transition:     -ms-transform $amount-of-time ease-out;
transition:         transform $amount-of-time ease-out;

Answer 2

要仅为旋转属性设置动画，我发现这至少适用于Chrome：

transition: transform 2.0s;

您可以为一个过渡属性中的不同属性设置不同的动画时间：

transition: transform 2.0s, color 5.0s, font-size 1.0s;

具有rotate属性的技巧特别是您使用transform属性。直觉上，这应该有效，但不起作用：

transition: rotate 2.0s; /* DOES NOT WORK */

相反，您必须使用transform代替rotate：

transition: transform 2.0s;

这可能是因为rotate: 90deg是transform: rotate(90deg)

的简写

注意

所有主流浏览器的最新版本现在都支持

transition。我假设如果您想要与旧浏览器更兼容，您可能会执行以下操作：

-webkit-transition: -webkit-transform 2.0s, color 5.0s, font-size 1.0s;
-moz-transition: -moz-transform 2.0s, color 5.0s, font-size 1.0s;
-ms-transition: -ms-transform 2.0s, color 5.0s, font-size 1.0s;
-o-transition: -o-transform 2.0s, color 5.0s, font-size 1.0s;
transition: transform 2.0s, color 5.0s, font-size 1.0s;

如何过渡只旋转变换？

2 个答案:

注意