如何过渡只旋转变换？

Question

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

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

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

但这也行不通。 我怎么解决这个问题？

Answer 1

Transform是供应商前缀

代替

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

做

-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)简写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;