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.

Dec 17, 2024

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.

Orignally published on my blog at: CSS translate, scale, and rotate have a new home and it’s splendid! Come on in.

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.

Live Foxy Codepen Demo

## 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 feel nice and cozy and generally more intuitive:

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, thetransform-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 totransform-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:

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;
  }
}

Live Peek Fox Codepen Demo with @keyframes

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.

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;
  }
}

Live Peek Fox Codepen Demo with @starting-style

Why This Matters

Readability: Each transformation is now its own property, making the code more readable.
Predictability: More intuitive transform-origin behavior.
Flexibility: Easier to animate and modify individual transformations.
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! 🦊✨

Schalk Neethling - Open Web - Accessibility - Ethical Source

Discussion about this post