Css 如何仅转换旋转变换？

我用一堆元素组成了一个背景图像，它们都是绝对位置，自由旋转

问题是，我只想转换这些对象的旋转，而不是顶部或左侧属性。明显的

转换：转换30s是不允许的。我有一个绝妙的想法

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

但这也不起作用。如何解决此问题？
Transform是供应商前缀

而不是

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

做

要仅设置rotate属性的动画，我发现至少在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;

允许转换。我想发生的是，中心旋转不是你所期望的。无论如何，这是我的猜测。也许最好把你的代码修改一下。请修改一下。我发现问题出在哪里了！我忘了定义-webkit-前缀。。。真蠢！无论如何，谢谢你们-ms转换不存在
-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;