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