CODEWITHSUNDEEP
css
GijsjanB
GijsjanB

Reputation: 10044

CSS transform function order

Why is there a difference in output between:

transform: translate(0, 100px) scale(2, 2);

and

transform: scale(2, 2) translate(0, 100px);

?

The first statement does what you (I) expect. Move the element 100px down and double the size. The second statement doubles the size, but also doubles the translate, so the element is moved down 200px!

Upvotes: 2

Views: 773

Answers (1)

King King
King King

Reputation: 63317

The transform will change the current coordinates system step by step (from left to right). That means each transform will change the coordinates system accumulatively. For this case:

transform: scale(2, 2) translate(0, 100px);

firstly the scale(2,2) will change the coordinates system by this formula:

X2 = X1 * 2
Y2 = Y1 * 2

Next when the translate(0, 100px) is applied, we have:

X2 = (X1 + 0) * 2 = X1 * 2
Y2 = (Y1 + 100) * 2 = Y1 * 2 + 200 (now you see 100px is doubled to 200px).

Similarly for the first case:

transform: translate(0, 100px) scale(2, 2);

You can derive that the formulas should be:

X2 = X1 + 0
Y2 = Y1 + 100

and 

X2 = (X1 * 2) + 0 = X1 * 2
Y2 = (Y1 * 2) + 100 = Y1 * 2 + 100

Upvotes: 3

Related Questions