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