New Way To Write Transform Properties In CSS 🙌

A few days ago, Google held its annual event to introduce the latest updates on its products, Google I/O 23. There were many cool things announced, but one of my favorites was the individual transform property in CSS.

What is Individual Transform Property?

In CSS you can add movement to your component by adding transformation. Such as translation, rotation, scalling, etc. And usually you write transform property in CSS like this:

div{
  height: 60px;
  width: 60px;
  background-color: green;
  transform: translate(50%, 70%) rotate(30deg) scale(1.2);
}

But with Individual transform property, you can specify transform properties individually, like this:

div{
  height: 60px;
  width: 60px;
  background-color: green;
  translate: 50% 70%;
  rotate: 30deg;
  scale: 1.2
}

This individual transform property will come in handy when you're writing a complex keyframe, like making animation. As an example, you want to make animation that translate on 0% and 100%, and rotate the element from 25% to 85%. In the past, you have to calculate manually value for that 2 transformation at the different keyframe points.
The code will be look like this:

div{
  height: 60px;
  width: 60px;
  background-color: green;
  animation: anima 5s linear 2s infinite;
}

@keyframes anima{
  0%{ transform: translateX(0);}
  10%{ transform: translateX(10%) rotate(72deg);}
  25%{ transform: translateX(25%) rotate(90deg);}
  85%{ transform: translateX(85%) rotate(180deg);}
  95%{ transform: translateX(90%) rotate(240deg);}
  100%{ transform: translateX(100%) rotate(360deg);}
}

But with individual transfrom property, you don't need to calculate in between points. Just simply write values for individual property.

div{
  height: 60px;
  width: 60px;
  background-color: green;
  animation: anima 5s linear 2s infinite;
}

@keyframes anima{
  0% {rotate: 0;}
  25%, 85% {rotate: 180deg;}
  100% { rotate: 360deg;}

  0% {translate: 0 0;}
  100% { translate: 100% 0;}
}

As you can see, the code much easier to read and manage if you want to add more transformation. But you need to know that is individual transform property is only support on browser like:

• Chrome: version 104 (and above)
• Microsoft Edge: version 104 (and above)
• Mozilla Firefox: Version 72 (and above)
• Safari: Version 14.1 (and above)

Although it is currently only supported on the latest versions of popular browsers, it is an exciting development that will undoubtedly streamline the process of web design.

Happy Coding, And Stay Creative