Modern CSS supports individual transform properties

tl;dr

Individual transform properties are great because they allow you to write more readable and maintainable CSS, especially when applying multiple transformations and/or when animating transforms.

For ages, CSS transforms had to be defined using the transform property. For a single transformation, this was something like transform: scale(1.5), and multiple transformations could be applied by chaining them.

Copy.example {
  transform: scale(1.5) rotate(45deg) translateY(-50%);
}

All modern browsers (Chrome & Edge 104+, Firefox 72+, Safari 14.1+, Samsung Internet 20+) also support individual properties for transforms.

Copy.example {
  scale: 1.5;
  rotate: 45deg;
  translate: -50% 0;
}

Samsung Internet 21 has recently been released, and virtually all of its users should be on 20 or 21, so you can use these in production now.
Read on for details and edge cases.

Readable and maintainable CSS

Without individual transform properties, modifying an element's transformations (e.g. on hover) can be painful, because you need to repeat all unchanged transformations, and need to know all existing transforms of an element in the first place (to not accidentally break those).

If we want to modify the example element from above when hovering, we can do that more concisely using individual transforms:

Copy.example:hover {
  scale: 2;
}

For comparison, here is the more cumbersome and less readable transform variant:

Copy.example:hover {
  transform: scale(2) rotate(45deg) translateY(-50%);
}

Transform animations

Animating multiple transforms with transform is painful. This is especially true when you want to animate transformations differently, e.g. scale quicker than translateY, since you need to define your own @keyframe animations which transform to intermediary values.

Custom transform properties, like many other properties, can be targets of transition. To animate them differently, simply specify different transitions.

Copy.example {
  /* ... */
  transition: scale 0.3s ease-out, translate 1s ease-in;
}

Not all transforms exist as property

Note that only scale, rotate and translate (not including scaleX/scaleY or translateX/translateY) exist as properties.
For other transformation functions you still need to use transform.

This is not perfect, but should cover almost all transforms you need to apply in practice.

Side note: transformation order

With transform, transformations were applied "in order" as defined at the property, i.e. in the example above: first scale, then rotate, then translate.
Individual transform properties are always applied in a defined order: first translate, then rotate, then scale, then any other transform.

See https://web.dev/css-individual-transform-properties/ Show archive.org snapshot for a few more details.