TIL: Multiple CSS transforms in one statement
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?!
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
