New in Firefox 72 is the ability to individually define CSS Transform Properties. You can now separately define scale
, rotate
, and translate
CSS properties, instead of having to chuff them all into one single transform
property.
The
translate
,rotate
, andscale
properties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order intransform
that keeps the actions oftransform()
,rotate()
andscale()
independent and acting in screen coordinates.
element {
scale: 2;
rotate: 30deg;
translate: -50% -50%;
}
The order that they are applied is, as per CSS Transforms Level 2 spec, first translate
, then rotate
, and then scale
— not the order which you define them in.
By having individual transform props, this also means that we can animate and transition them separately.
@keyframes individual {
50% {
translate: 0 50%;
}
75% {
scale: 1;
}
}
element {
transition:
rotate 200ms ease-in-out,
scale 500ms linear;
}
element:hover {
scale: 2;
rotate: -3deg;
}
Here’s a pen demonstrating its usage:
See the Pen
Individual CSS Transform Properties Demo by Bramus (@bramus)
on CodePen.
In Chrome these new props are still behind the #enable-experimental-web-platform-features
feature flag.
~
Thank me with a coffee.
I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!
To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.
Leave a comment