CSS translate, scale, and rotate have a new home and it’s splendid! Come on in.

Unlock simpler web development with CSS's new individual transform properties—cleaner syntax, more intuitive styling, and delightful animations.

Published on: 2024-12-17

Written by Schalk Neethling

As web developers, we’re always excited when a specification evolves to make our lives easier. Today, I want to share a change in CSS that simplifies how we handle element transformations—the new rotate, scale, and translate properties.

The Classical Way: Transform Function Gymnastics

Traditionally, we’ve been wrestling with the CSS transform property, combining multiple functions into a single line:

svg {
  transform: rotate(180deg) scale(0.5) translate(0, 25rem);
  transform-origin: 50%;
}

This approach always felt a bit clunky. You’re juggling multiple functions, have to remember whether values are space or comma-separated and then there is the fun with getting transform-origin just right.

Demo: Simple classical transform

See the Pen PeekFox - Old School transform by Schalk Neethling (@schalkneethling) on CodePen.

A New Transformed Fox: Individual Transformation Properties

Since being introduced in August 2022, we can now use translate, scale, and rotate as standalone properties, which feels nice and cozy and generally more intuitive:

Baseline Support Status for Individual Transformation Properties

svg {
  rotate: 180deg;
  scale: 0.5;
  translate: 0 25rem;
}

A Delightful Side Effect: Predictable Transform Origin

What’s fascinating is how these new properties handle transform-origin. When I first tried them out to make the demo below, it felt like transform-origin was doing what I expected out of the box. A delightful surprise!

I decided to peek under the hood using the browser’s developer tools and discovered that the browser now sets the transform-origin based on the inline (width) and block (height) size of the element. In other words, for the little fox, the transform-origin matches its intrinsic size:

transform-origin: 302.383px 320px;

If you want to inspect this, ensure you target the SVG element, switch to the Computed pane in the Elements panel, and check the Show All checkbox. You can then filter the list down to transform-origin.

Animation: The Peek Fox Demo

Let’s bring this to life with an animated example I’m calling “Peek Fox”. We’ll use the SVG Fox, and create a playful sliding animation.

Using @keyframes

First, an approach that might be familiar to you, @keyframes:

Baseline Support Status for keyframes

svg {
  block-size: 40rem;
  inline-size: auto;

  rotate: 180deg;
  scale: 0.5;

  animation: peek 1s forwards;
}

@keyframes peek {
  from {
    translate: 0 -40rem;
  }

  to {
    translate: 0 -12.5rem;
  }
}
Demo: Peek Fox with @keyframes

See the Pen PeekFox - Gotta keep em separated and animated by Schalk Neethling (@schalkneethling) on CodePen.

Enter @starting-style: Simplifying Animations

But wait, there’s more! 🙃 CSS is constantly evolving. We are in a time where all the amazing specification authors, people dreaming up and proposing new features for CSS, and the amazing browser engineers bringing it all to life are spoiling front-end web developers.

Baseline Support Status for keyframes

One of these new features that has been added to CSS is @starting-style. If we switch to using @starting-style instead of @keyframes, just look at how expressive our CSS is and we get the exact same end result.

svg {
  block-size: 40rem;
  inline-size: auto;

  rotate: 180deg;
  scale: 0.5;

  translate: 0 -12.5rem;
  transition: translate 1s;

  @starting-style {
    translate: 0 -40rem;
  }
}
Demo: Peek Fox with @starting-style

See the Pen PeekFox - with @starting-style by Schalk Neethling (@schalkneethling) on CodePen.

Why This Matters

  1. Readability: Each transformation is now its own property, making the code more readable.
  2. Predictability: More intuitive transform-origin behavior.
  3. Flexibility: Easier to animate and modify individual transformations.
  4. Concise and Expressive: Which of these code examples would you rather write?

Conclusion

CSS continues to evolve, making our styling more intuitive and powerful. These new transformation properties are a testament to the web platform’s commitment to developer experience and great user experiences.

Happy coding, and may your transforms be smooth and your fox animations delightful! 🦊✨

Further Reading