Individual CSS Transform Properties

~

# Individual Transform Properties

New in Firefox 72 is the ability to individually define CSS Transform Properties. You can now separately define scale, rotate, and translate CSS properties, instead of having to chuff them all into one single transform property.

The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order in transform that keeps the actions of transform(), rotate() and scale() independent and acting in screen coordinates.

element {
  scale: 2;
  rotate: 30deg;
  translate: -50% -50%;
}

By having individual transform props, this also means that we can animate and transition them separately.

@keyframes individual {
  50% {
    translate: 0 50%;
  }
  75% {
    scale: 1;
  }
}

element {
  transition:
    rotate 200ms ease-in-out,
    scale 500ms linear;
}

element:hover {
  scale: 2;
  rotate: -3deg;
}

~

# A note about the order in which these are applied

Unlike when using a transform(), the order is not applied from left to right. The order in which these are applied in is first translate, then rotate, and then scale. This is defined in the CSS Transforms Level 2 spec.

~

# Demo

Here’s a pen demonstrating its usage:

See the Pen
Individual CSS Transform Properties Demo by Bramus (@bramus)
on CodePen.

~

# Browser Support

This table below shows an up-to-date list of browser support:

Chromium (Blink)

✅ Support as of Chromium 104

Firefox (Gecko)

✅ Support as of Firefox 72

Safari (WebKit)

✅ Support as of Safari 14.1

~