css3は、これらの2つの文がtransformに相当しますか？

Question

私はこれらの2つの文のセットが同等かどうか疑問に思っていました。私は彼らがそうだと思ったが、彼らは違うことをしているようだ。

-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を実行するようです。それはちょうど後者を行うのですか？しかし、書き込むことによって...

これは、最初に回転してから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-transformrotate(45deg)に設定してtranslateX(200px)で上書きされます。

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