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，而rotate 没有执行。我将第一组语句的顺序更改为...

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

它首先进行旋转，然后进行平移X。我认为这应该只是编写它的简写。不是吗？

这是代码的链接。这真的很简单。 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);