Intent to Implement: Independent Properties for CSS Transforms
CSS Transforms Module Level 2 - Editor’s Draft
The following CSS properties are defined:
This exposes a more intuitive way for web developers to use transforms. Instead of needing to reason about interactions between translation, rotation and scale, authors are able to treat each property as if it applies locally to the transformed elements.
The properties of the transforms are individually animatable.
The runtime flag used will be CSSTransforms2.
Even simple uses of the existing transform property require knowledge of the non-commutative nature of matrix multiplication - for example, “transform: translate(100px) rotate(45deg)” is not equivalent to “transform: rotate(45deg) translate(100px)”
It is difficult in the general case to animate components of transform strings independently. For example if web developers want to start a translation and a rotation animation with different delays, they are currently required to construct intermediate transformation states corresponding to when the different animations begin/end overlapping. Using separate CSS properties will communicate the intention of the animation more clearly and make it easier to craft complicated animations..
Critically for animations, it will be possible to inspect the interpolated values of the individual transform properties without needing to manually decompose the transform matrix.
Ongoing technical constraints
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
OWP launch tracking bug?
Link to entry on the feature dashboard
Requesting approval to ship?
No. The feature will be implemented behind a runtime flag.
Is this just a simpler syntax, or does it also provide some new
capabilities? Can you give a more concrete example of where it would
be easier to work with, or harder to make mistakes?
Per http://dev.w3.org/csswg/css-transforms-2/#ctm there's a set order
(translate, rotate, scale, transform) in which to apply the different
properties, so "translate:100px; rotate: 45deg" means the same as
"rotate: 45deg; translate:100px". Since the order cannot be changed,
has this order been chosen to match what is most often the desired
behavior? When it isn't the desired behavior, is the only other way to
animate e.g. rotate and translate separately to use separate elements?