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%;

似乎在第一组语句中，只执行translateX而旋转不执行。我把第一组陈述的顺序改为......

-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，以便 last 语句是唯一呈现的语句：

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);