— by Nesim

The individual transform properties scale, rotate, and translate can independently transform an element, without relying on the transform property. This simplifies processes like animations, where only one value changes, but due to the transform’s syntax, all other values needed to be copied in the next keyframe.

Instead of this:

.element {
  transform: scale(0.8) translateX(0.5rem);

  &:hover {
    transform: scale(1.2) translateX(0.5rem);
  }
}

only to change the scale value, we can now do:

.element {
  scale: 0.8;
  translate: 0.5rem;

  &:hover {
    scale: 1.2;
  }
}

With that, functions like translateY or scaleX aren’t translated to properties. The new properties also act as shorthands for taking up to three values. More on that in the interactive MDN demos below.

Interactive demos

Browser support

All transform properties were released in the same version of the browsers