Individual Properties for CSS Transforms

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 104)
Intent stage: Shipped

Summary

This adds three new CSS properties: translate, rotate, and scale. These properties are known as the individual transform properties (and were previously known as the independent transform properties). This exposes a simple way for web developers to access transforms in an intuitive way, without having to think about how functions in the transform property interact with each other. The properties are individually animatable.

Standards & signals

Specification: https://drafts.csswg.org/css-transforms-2/#individual-transforms
Firefox: Shipped/Shipping — Shipped in Firefox 72, January 2020.
Safari: Shipped/Shipping — Shipped in Safari 14.1 (desktop) / 14.5 (iOS), April 2021.
Web developers: Positive — 25 stars on https://bugs.chromium.org/p/chromium/issues/detail?id=496550 . Notable early developer request for the feature (before WG adoption) in: https://twitter.com/rachelnabors/status/618266391993454592 https://twitter.com/rachelnabors/status/618267483296825344 and early reaction to WG adoption in https://twitter.com/SaraSoueidan/status/613368671315054592 . Positive developer reactions to https://twitter.com/argyleink/status/1338907239990497280 . Largely positive reactions to news of other engines shipping the feature in responses to https://twitter.com/jensimmons/status/1387870244392382468 , https://twitter.com/simevidas/status/627956718098485248 , https://twitter.com/dancwilson/status/121457225783989862 , and in https://twitter.com/guerriero_se/status/1338468028804001796 , https://twitter.com/eladsc/status/1216286886697885696 , https://twitter.com/_zouhir/status/1389461399026294791 . More recent developer interest in https://twitter.com/anatudor/status/1377491818636587008 , https://twitter.com/anatudor/status/1309200388311199751 .
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=496550

View on chromestatus.com