Firefox 72 was first out of the gate with “independent transforms.” That is, instead of having to combine transforms together, like:
.el {
transform: translate(10px, 10px) scale(0.95) rotate(10deg);
}
…we can do:
.el {
rotate: 10deg;
scale: 0.95;
translate: 10px 10px;
}
That’s extremely useful, as having to repeat other transforms when you change a single one, lest remove them, is tedious and prone to error.
But there is some nuance to know about here, and Dan Wilson digs in.
Little things to know:
- Independent transforms happen first. The
transform
property happens last and stacks on top of what has already been done, which can get confusing¹. - They all share the same
transform-origin
. - The
offset-*
properties also effectively moves/rotates elements. Those happen after independent transforms and beforetransform
.
- Claus Colloseus wrote in to fix some issues in this post and clarify just how confusing this can be. For example,
rotate: 45deg; transform: rotate(-45deg);
will do nothing as both of them will apply and effectively cancel each other out. So shouldn’ttranslate: 50px 0; rotate: 45deg; transform: translate(-50px, 0) rotate(-45deg);
also all cancel out? No, because of the ordering, the end result is liketranslate(14.6447px, -35.3553px)
.
Direct Link to Article — Permalink
The post How They Fit Together: Transform, Translate, Rotate, Scale, and Offset appeared first on CSS-Tricks.