CSS 如何过渡只旋转变换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17578431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to transition only rotate transformation?
提问by Digger
I'm using a bunch of elements to compose a background image and they all absolutely position around, rotating freely.
我正在使用一堆元素来组成背景图像，它们都绝对定位，自由旋转。
Problem is, I would like to transition only the rotation of those objects, not the top nor left properties. And apparently transition: transform 30s;isn't allowed. I had the brilliant idea of doing
问题是，我只想转换这些对象的旋转，而不是顶部或左侧的属性。而且显然transition: transform 30s;是不允许的。我有一个绝妙的主意
transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;
But that also doesn't work. How can I solve this?
但这也行不通。我该如何解决这个问题？
回答by Conqueror
Transform is a vendor prefix
Transform 是供应商前缀
Instead of
代替
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;
回答by Chris Dutrow
To animate only the rotate property, I found this works in at least Chrome:
为了只为旋转属性设置动画，我发现这至少适用于 Chrome：
transition: transform 2.0s;
You can set different animation times for different properties inside the one transition property:
您可以在一个过渡属性中为不同的属性设置不同的动画时间：
transition: transform 2.0s, color 5.0s, font-size 1.0s;
The trick with the rotateproperty specifically is that you have use the transformproperty instead. Intuitively, this should work but does NOT work:
rotate特别是该属性的技巧是您已经使用该transform属性。直观地，这应该有效但不起作用：
transition: rotate 2.0s; /* DOES NOT WORK */
Instead you have to use transformin place of rotate:
相反，您必须使用transform代替rotate：
transition: transform 2.0s;
This is probably because rotate: 90degis shorthand for transform: rotate(90deg)
这可能是因为rotate: 90deg是简写transform: rotate(90deg)
Note
笔记
transitionis now supported in the latest versions of all major browsers. I assume if you want more compatibility with older browsers, you might do something like:
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;
