CSS Transform Properties - translate, rotate & scale - Are Also Available As Independent CSS Properties

CSS Update

Values in CSS transform property — translate, rotate and scale — are now also available as individual CSS properties.

  • translate
  • rotate
  • scale
/* 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.

Browser Compatibility

February 26, 2020

Comments

Loading Comments