如何过渡只旋转变换？

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)

注意

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;