css - 如何仅转换旋转转换？

Question

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

问题是，我只想转换这些对象的旋转，而不是 top 或 left 属性。而且显然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;