Separate Writing of CSS transform Functions: New Chrome 104 Feature and Practical Usage

This article introduces the new Chrome 104 feature that allows CSS transform to be written as separate properties ( translate , rotate , scale ), which can greatly simplify complex layouts, animations, and accessibility improvements.

What is a separated transform ?

The author shows a basic example of centering an element using transform: translate(-50%, -50%) and then demonstrates how the same effect can be expressed with separate translate and scale properties.

div {
  width: 200px;
  height: 200px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  /* original */
  transform: translate(-50%, -50%);
}

When an animation is needed, the author adds a @keyframes block that only animates scale() , keeping the original translate() unchanged.

@keyframes scale {
  0% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(1.2); }
}

Separate transform syntax

Instead of writing a combined transform , the new syntax lets you declare each component individually:

div {
  /* remove the combined line */
  translate: -50% -50%;
  scale: 1;
  animation: scale 1s infinite linear alternate;
}

The order of execution for the separated properties is always translate → rotate → scale , regardless of the order they appear in the stylesheet.

Impact of order on combined transform

When using a single transform declaration, the functions are applied from left to right. For example, transform: scale(1.5) translate(50%, 0) scales first, then translates, which yields a different result than the reverse order.

Co‑existence of both syntaxes

The article explains how combined and separated declarations can appear together. The combined transform is evaluated first, then the individual properties are applied in the fixed order (translate → rotate → scale). This can lead to unexpected results if the same transformation is declared twice.

.mix {
  transform: translate(100px, 100px) rotateZ(60deg) scale(2);
  translate: 150px 150px;
  rotate: Z 30deg;
  scale: 1.5;
}

In this case the final transformation is the result of applying the combined line, then the separate translate , rotate , and scale in that order.

Fallback with @supports

Because the individual properties are not supported in all browsers, the author recommends using an @supports rule to provide a fallback to the traditional combined syntax.

.container {
  translate: 50% 10%;
  rotate: 80deg;
  scale: 1.5;
}
@supports not (scale: 1) {
  .container {
    transform: translate(50%,10%) rotate(80deg) scale(1.5);
  }
}

Summary

CSS transform can now be split into translate , rotate , and scale properties.

Combined transform functions are evaluated left‑to‑right.

Separate properties always follow the order translate → rotate → scale, regardless of source order.

Both syntaxes can coexist; the combined declaration runs first, then the individual ones are applied.

Use @supports for graceful degradation on browsers that lack the new feature.

By understanding these rules, developers can write clearer, more maintainable CSS animations and layouts.