Intent to implement: Independent CSS Transform Properties

[Chun Mun Soon]

Title:

Intent to Implement: Independent Properties for CSS Transforms

Body:

Contact emails

so...@google.com, ericwi...@chromium.org

Spec

http://dev.w3.org/csswg/css-transforms-2/

CSS Transforms Module Level 2 - Editor’s Draft

Summary

The following CSS properties are defined:

translate

rotate

scale

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.

Motivation

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.

Compatibility Risk

No.

Ongoing technical constraints

None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.

OWP launch tracking bug?

https://code.google.com/p/chromium/issues/detail?id=492455

Link to entry on the feature dashboard

https://www.chromestatus.com/features/5705698193178624

Requesting approval to ship?

No. The feature will be implemented behind a runtime flag.

[Philip Jägenstedt]

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?

> To unsubscribe from this group and stop receiving emails from it, send an
> email to blink-dev+...@chromium.org.

[Shane Stephens]

On Mon, Jun 1, 2015 at 10:59 PM Philip Jägenstedt <phi...@opera.com> wrote:

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?

By themselves, the properties don't add capabilities. However, they do when paired with transitions. It's currently impossible to independently transition the rotation, translation or scroll of an element - instead, you'd need to manually create an animation that performed the appropriate action, and keep it up-to-date in the face of further transition requests.

For example, this:

.button {

  translate: 0px;

  rotate: 0deg;

  transition: translate 1s, rotate 1s;

}

.button:hover {

  translate: 100px;

}

.button:active {

  rotate: 20deg;

}

Is quite hard to achieve right now, and impossible without JavaScript.

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?

This is the order that lets you think about translation, rotation and scale as separate concepts. In other words, a translation always moves the element in screen coordinates, a rotation always applies cleanly around the element's center, and a scale applies in the local coordinates of the element (and doesn't e.g. cause a skew).

If you want to use a specific order, then you can simply fall back to the existing transform property.

Cheers,

    -Shane

[Philip Jägenstedt]

Thanks Shane, I now see that this order probably does make sense most of the time. Not required, but LGTM.

[Paul Irish]

Very happy to see this. 

Transforms provide huge performance advantages, but have come with the authoring drawbacks this proposal stands to address.

Thanks for taking this on.