Re: [css-transforms] Making 'transform' match author expectations better with specialized 'rotate'/etc shorthands

>
> > Yes, order matters when you need the transforms to interact.  When you
> > don't (when they're all "local"), there's one specific order that does
> > what you want.
>
> “local” seems to be confusing here. All transformations are local for an
> element and take affect on rendering into the parents graphics context.


Yeah, local is confusing - all transforms act locally. I think what Tab
means is that there's one specific order for which transforms appear to act
globally as well. Say I have an element {top: 0px, left: 0px}, which I want
to:
 * move by 500px in x and 200px in y
 * rotate by 25 degrees; and
 * scale by 1.2 in x and 1.1 in y

Regardless of the order in which I apply these operations, the element is
always *locally* moved, rotated and scaled - that is, according to the
element's local coordinate system (which changes with respect to the global
coordinate system) the operations are a translate(500px, 200px), a
rotate(25deg), and a scale(1.2, 1.1) regardless of the order in which
they're applied.

Of course, globally, it's a different story. Mostly the element is
*not* translated
globally by 500px, 200px, is *not* rotated by 25 degrees, or is *not* scaled
in x and y by 1.2 and 1.1 respectively. For example:
rotate(25deg) scale(1.2, 1.1) translate(500px, 200px)
Globally, this is rotated by about 27 degrees. It's also significantly
skewed, and it's translated in both x and y by about 450px.

However, there is one ordering for which the local transformations produce
matching global transformations:
translate(500px, 200px) scale(1.2, 1.1) rotate(25deg)
Globally, this is at position (500px, 200px) (well almost. Technically the
origin has moved by this much). It's scaled by 1.2 in x and 1.1 in y, and
it's rotated against the global x and y coordinate system by 25 degrees.

This ordering is clearly special, and clearly has strong advantages for the
purposes of individual rotate, translate and scale properties - the result
of setting these properties will always match across a global and a local
coordinate system. Essentially, we want people to be able to specify:

{
  translation: 500px 200px;
  rotation: 25deg;
  scale: 1.2 1.1;
}

and have it Just Work.


> I think what you meant to say is (correct me if I am wrong) that authors
> most likely just will use one of the transform properties: Either rotate,
> or translate, or scale or transform. And therefore you just want to have a
> sane fallback if an author uses them in combination.
>

That isn't what we are trying to say. We want beginner authors to be able
to naively specify translations, rotations and scales as if they were
global, and to have them do what they almost certainly wanted them to; but
we want more advanced authors to be able to use the transform property and
control the ordering of transform components as well.

A handy bonus is that having separate translation: rotation: and scale:
properties means it's easy to animate these channels independently of each
other, without resorting to additive animation.

Cheers,
    -Shane