CODEWITHSUNDEEP
csstransform
Sasha
Sasha

Reputation: 3281

css3 are these two statements equivalent for transform?

i was wondering if these two set of statements are equivalent or not. i thought they were but they seem to be doing different things.

-webkit-transform: rotate(45deg); 
-webkit-transform: translateX(200px);
-webkit-transform-origin:0% 100%;

and...

-webkit-transform: rotate(45deg) translateX(200px); 
-webkit-transform-origin:0% 100%;

it seems that on the first set of statements, only the translateX gets performed and rotate does not. i changed the order around for the first set of statements to...

-webkit-transform: translateX(200px);
-webkit-transform: rotate(45deg); 
-webkit-transform-origin:0% 100%;

and it seems to just perform the rotate and not the translateX. does it just do the latter one? however by writing...

-webkit-transform: rotate(45deg) translateX(200px); 
-webkit-transform-origin:0% 100%;

it does both the rotate first and then the translateX. i thought this was supposed to just be a shorthand of writing it. is it not?

here is a link to the code. it's really simple. http://jsfiddle.net/gCeUe/2/

thanks for the help! clear and thorough help would be much appreciated = )

Upvotes: 1

Views: 197

Answers (1)

Blender
Blender

Reputation: 298196

CSS is parsed in a way so that the last statement is the only one that is rendered:

color: red;
color: green;
color: blue; /* This is what the color will be */

When you write your code like this:

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

-webkit-transform is set to rotate(45deg) and then overwritten with translateX(200px).

This is the correct syntax:

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

Upvotes: 3

Related Questions