css3这两个语句是否相当于变换？

Question

我想知道这两组陈述是否相同。我以为他们是，但他们似乎在做不同的事情。

-webkit-transform: rotate(45deg); 
-webkit-transform: translateX(200px); 
-webkit-transform-origin:0% 100%; 

和...

-webkit-transform: rotate(45deg) translateX(200px); 
-webkit-transform-origin:0% 100%; 

似乎在第一组语句，只有平移X得到执行和旋转没有。我改变了第一套报表的命令...

-webkit-transform: translateX(200px); 
-webkit-transform: rotate(45deg); 
-webkit-transform-origin:0% 100%; 

它似乎只是执行旋转，而不是translateX。它只是做后者吗？然而通过书写...

-webkit-transform: rotate(45deg) translateX(200px); 
-webkit-transform-origin:0% 100%; 

它既先旋转，然后translateX。我认为这应该只是写它的简写。不是吗？

这里是对代码的链接。它非常简单。 http://jsfiddle.net/gCeUe/2/

感谢您的帮助！清晰透彻的帮助将非常感激=）

Answer 1

CSS解析的方式，以使最后说法是渲染的只有一个：

color: red; 
color: green; 
color: blue; /* This is what the color will be */ 

当你写你这样的代码：

-webkit-transform: rotate(45deg); 
-webkit-transform: translateX(200px); 

-webkit-transform设置为rotate(45deg)，然后用translateX(200px)覆盖。

这是正确的语法：

-webkit-transform: rotate(45deg) translateX(200px);