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 {
    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

💡 Although this post was originally published in January 2020, the section below is constantly being updated. Last update: August 2, 2022.

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


Did this help you out? Like what you see?
Thank me with a coffee.

I don\'t do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

BuymeaCoffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.