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

Avatar of Chris Coyier
Chris Coyier on

Grow sales with a smart marketing platform. Try Mailchimp today Mailchimp tracking pixel

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 before transform.
  1. 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’t translate: 50px 0; rotate: 45deg; transform: translate(-50px, 0) rotate(-45deg); also all cancel out? No, because of the ordering, the end result is like translate(14.6447px, -35.3553px).