TIL: Multiple CSS transforms in one statement

Gavyn McKenzie
Sep 4, 2018 · 1 min read

CSS Transforms are awesome! They’re especially great for animations. Sometimes your transforms need to get a little more complicated.

So you probably know about being able to transform multiple properties.

.foo {
transform: scale(2) translate(50%, 0);
}

But did you know you can add transform properties multiple times?

.foo {
transform: translate(50%, 0) scale(2) translate(0, 50%);
}

Each of the transforms will be applied in order. Which is quite important because…

Bonus: Transform property orders matter.

Transforms are calculated from right to left.

This:

.foo {
transform: scale(2) translate(50%, 0);
}

Will produce a different result to this:

.foo {
transform: translate(50%, 0) scale(2);
}

Because a transform is a matrix, not just a series of properties. That’s why is would be very difficult to have something like this:

.foo {
translate: 50%, 0;
scale: 2;
}

Which order should they be applied?!

More reading at CSS Tricks.


At Etch we’re always learning so we can continue to build awesome software.

Let’s see if we can help your team today hey@etch.co

Gavyn McKenzie

Written by

UK based front-end architect. I work @etch building the internet, one brick at a time.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade