Order in CSS transformation – transform functions vs individual transforms
Tags: css, webdev
Published: 2020-12-22 14:46:25

---
title: Order in CSS transformation – transform functions vs individual transforms
published: true
description: Individual transformation in CSS have a pre-defined order which leads to different visual effects when moving translate transformation functions to transformation properties.
tags: css, webdev
canonical_url: https://www.stefanjudis.com/blog/order-in-css-transformation-transform-functions-vs-individual-transforms/
---

[With Webkit announcing their upcoming support for the `rotate`, `translate` and `scale` CSS properties](https://webkit.org/blog/11420/css-individual-transform-properties/), [individual transform properties](https://drafts.csswg.org/css-transforms-2/#individual-transforms) 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.

```css
@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.**

```css
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**.

## The order of CSS transform functions

When you have a look at the ["Rendering Model" sections of the "CSS Transforms Module Level 1" spec](https://www.w3.org/TR/css-transforms-1/#transform-rendering), 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.

![Example showing that the visual result of CSS transformations can be different depending on their order](//images.ctfassets.net/f20lfrunubsq/3hqPcRWwuuH5vvlJofHZft/a33bb401414d2908286fa8faa72ae5f3/Screenshot_2020-12-22_at_15.04.59.png)

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


## The order of CSS individual transforms

Contrary to transformation functions, [individual transforms follow a pre-defined order](https://drafts.csswg.org/css-transforms-2/#ctm). `translate` is applied first, followed by `rotate` and `scale`.

The following CSS rules will lead to different transformations.

```css
.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

![Operation order of CSS transformation showing that transformation functions in the `transform` property are applied left to right and individual transforms depend on a pre-defined order.](//images.ctfassets.net/f20lfrunubsq/1NLZ1kgGLOIkBb9OigutaQ/1696935da3aab5e932b843a6389d868e/Screenshot_2020-12-22_at_15.35.55.png)

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](https://codepen.io/stefanjudis/pen/JjRroyL).