New Way To Write Transform Properties In CSS 🙌

This content originally appeared on DEV Community and was authored by Khairunnisaas

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

This content originally appeared on DEV Community and was authored by Khairunnisaas

Print Share Comment Cite Upload Translate Updates

APA

Khairunnisaas | Sciencx (2023-05-12T02:44:00+00:00) New Way To Write Transform Properties In CSS 🙌. Retrieved from https://www.scien.cx/2023/05/12/new-way-to-write-transform-properties-in-css-%f0%9f%99%8c/

MLA

" » New Way To Write Transform Properties In CSS 🙌." Khairunnisaas | Sciencx - Friday May 12, 2023, https://www.scien.cx/2023/05/12/new-way-to-write-transform-properties-in-css-%f0%9f%99%8c/

HARVARD

Khairunnisaas | Sciencx Friday May 12, 2023 » New Way To Write Transform Properties In CSS 🙌., viewed ,<https://www.scien.cx/2023/05/12/new-way-to-write-transform-properties-in-css-%f0%9f%99%8c/>

VANCOUVER

Khairunnisaas | Sciencx - » New Way To Write Transform Properties In CSS 🙌. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/12/new-way-to-write-transform-properties-in-css-%f0%9f%99%8c/

CHICAGO

" » New Way To Write Transform Properties In CSS 🙌." Khairunnisaas | Sciencx - Accessed . https://www.scien.cx/2023/05/12/new-way-to-write-transform-properties-in-css-%f0%9f%99%8c/

IEEE

" » New Way To Write Transform Properties In CSS 🙌." Khairunnisaas | Sciencx [Online]. Available: https://www.scien.cx/2023/05/12/new-way-to-write-transform-properties-in-css-%f0%9f%99%8c/. [Accessed: ]

rf:citation

» New Way To Write Transform Properties In CSS 🙌 | Khairunnisaas | Sciencx | https://www.scien.cx/2023/05/12/new-way-to-write-transform-properties-in-css-%f0%9f%99%8c/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

What is Individual Transform Property?

Related Posts