Values in CSS transform property — translate, rotate and scale — are now also available as individual CSS properties.
/* instead of transform: scale(2); */
#element {
scale: 2;
}
/* instead of transform: scale(2) rotate(90deg) */
#element {
scale: 2;
rotate: 90deg;
}
Why is this useful ? Note that when using multiple transform functions in CSS transform property, their order makes a difference to the final result.
transform: scale(1.2) rotate(90deg) translate(25%) will give a different result from
transform: rotate(90deg) scale(1.2) translate(25%).
With translate, rotate and scale becoming individual properties, developers are not required to remember the exact order of transform functions to apply when specifying multiple transforms for an element.
Comments