How They Fit Together: Transform, Translate, Rotate, Scale, and Offset

Ordering Matters in CSS Independent Transforms

Firefox 72 pioneered “independent transforms,” letting developers skip the messy chore of repeating transforms just to tweak one value. Instead of layering them like this:

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

…we can write shorthand like this:

.el {
  rotate: 10deg;
  scale: 0.95;
  translate: 10px 10px;
}

This is a big usability win, since repeating or removing transforms manually is error-prone and tedious. But as Dan Wilson explains, a few nuances can bite.

Important details to remember:

• Independent transforms apply first. The transform property runs afterward and stacks on top, which can get confusing.
• All independent transforms share the same transform-origin.
• The offset-* properties also move and rotate elements, but those occur after independent transforms and before transform.

1. Claus Colloseus pointed out just how tricky the ordering is. For example, rotate: 45deg; transform: rotate(-45deg); nets out to zero rotation since both apply sequentially. But translate: 50px 0; rotate: 45deg; transform: translate(-50px, 0) rotate(-45deg); does not cancel out — the ordering makes the final result roughly translate(14.6447px, -35.3553px).