Webmasters Gallery

Firefox 72 was first out of the gate with “independent transforms.” That is, instead of having to combine transforms together, like:

.el {
  transform: rotate(10deg) scale(0.95) translate(10px, 10px);
}

…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. So, if you also use a transform, that can override them if the same transform types is used.
• They all share the same transform-origin.
• The offset-* properties also effectively moves/rotates elements. Those happen after independent transforms and before transform.

Direct Link to Article — Permalink

The post How They Fit Together: Transform, Translate, Rotate, Scale, and Offset appeared first on CSS-Tricks.