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, and scale 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 in transform that keeps the actions of transform(), rotate() and scale() independent and acting in screen coordinates.
translate: -50% -50%;
In CSS we use the transform property to manage an element’s translation, rotation, and scale. As it’s one single combined property for all three possible transformations, setting transform: rotation(90deg); on an element will (re)set the values for translation and scale by falling back to their default values.
This will change when the “CSS Transform Module Level 2” spec will be approved and implemented (currently already partly in Chrome Canary), as it introduces separate properties for each possible transformation:
The translate, rotate, and scale 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 in transform that keeps the actions of translate(), rotate() and scale() independent and acting in screen coordinates.
Dan Wilson created a nice demo to already use this kind of behavior today, with the help of CSS Variables. Initially the CSS transform is set to the default values using this snippet:
With CSS transforms we can’t define arbitrary shapes using a set of points, we’re stuck with HTML elements which are always rectangular and have two dimensional properties such as top, left, width and height to determine their position and size. In many ways this makes dealing with 3D easier, as there’s no complex math to deal with — just apply a CSS transform to rotate an element around an axis and you’re done!
Creating objects from rectangles seems limiting at first but you can do a surprising amount with them.
Really impressive. Also: look at the date of that post: January 2013.
You might think that math doesn’t have a lot to do with writing stylesheets, but you can actually do some amazing things with a little math in CSS. Math (particularly trigonometry) can help you model the real world. You’ll need it if you want to do something complicated with 3D transforms. And it can be a lot of fun if you just want to impress your friends.
The author, Ana Tudor, also talked about this at CSS Day 2014. Unfortunately I could not attend, due to being in Ireland at the moment.