Order in CSS transformations – transform functions vs individual transforms (#blogPost)

With Webkit announcing their upcoming support for the rotate, translate and scale CSS properties, individual transform properties are on their way into browsers.

At the time of writing, the new properties are supported in stable Firefox and will be available in Safari and Chrome eventually (they're available in Chrome Canary and will be available in Safari Tech Preview soon).

If you want to use rotate, translate and scale today, you have to rely on feature detection in your CSS code.

@supports (translate: 0) {
  /* your code with `translate` */
}

@supports not (translate: 0) {
  /* your code without `translate` */
}

I can't wait to adopt the new properties but before we jump into our codebases and change all transform properties to their individual transform counterparts, let's hold on for a moment!

There is a fundamental difference between the two ways of transforming elements.

div {
  /* 
    You define the order of operations!
    These transform functions are applied from left to right.
  */
  transform: translate(50%, 0) scale(1.5);
}

div {
  /* 
    The order of operations is pre-defined!
    translate -> rotate -> scale
  */
  translate: 50% 0;
  scale: 1.5;
}

Most likely, you can't move all transformation functions to transformation properties because their order matters when they're used in the transform property.

When you have a look at the "Rendering Model" sections of the "CSS Transforms Module Level 1" spec, you'll see that transform functions (translate(), rotate(), etc.) are applied from left to right.

Multiply by each of the transform functions in transform property from left to right.

This fact can be surprising because the same applied transformation functions can lead to different visual effects depending on their order.

The example above shows that the usage of translate(50%, 0) leads to different results when it's paired with the scale() function.

Contrary to transformation functions, individual transforms follow a pre-defined order. translate is applied first, followed by rotate and scale.

The following CSS rules will lead to different transformations.

.square {
  transform: scale(1.5) translate(50%, 0);  
}

.square {
  translate: 50% 0;
  scale: 1.5;
}

When you adopt individual CSS properties, you can not just go ahead and change all transform functions to their variants because order matters when using CSS transforms.

Be careful when migrating to individual transforms

I'm happy with the web platform moving forward and rotate, scale and translate are welcome additions to CSS. Once these properties are cross-browser supported, I plan to migrate all my transformations over. If you do the same, be aware that you can't migrate every transform property one-to-one.

If you want to play around with the new individual transform properties, open this CodePen in Firefox, Chrome Canary or the upcoming Safari Tech preview.