W3C home > Mailing lists > Public > www-style@w3.org > July 2014

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

From: Shane Stephens <shans@google.com>
Date: Wed, 16 Jul 2014 22:21:04 +1000
Message-ID: <CAGTfzwTO6C_RyVLJUeNJdVHkk=-AQoZaJ3PSLSo-a-QV9q_SOA@mail.gmail.com>
To: Dean Jackson <dino@apple.com>
Cc: Dirk Schulze <dschulze@adobe.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, Alan Stearns <stearns@adobe.com>, www-style list <www-style@w3.org>
> Let's make the example more simple. Let's say I have a 100x100 square:
> * move by 200px in x and 200px in y
> * rotate by 45 degrees; and
> * scale by 2 in x and 1 in y
> Should authors expect to see a 200x100 rectangle rotated 45deg? It turns
> out the result is a diamond. (Of course, I applied the transforms in the
> order you specify below, not the order in which you described them above.
> If I'd done them in the order you describe above, I would get a 200x100
> rectangle rotated 45 degrees... because order matters :)

It's interesting - why did you suggest that authors might expect to see a
200x100 rectangle rotated 45deg? Is it because this is actually the naive
expectation of authors everywhere as to how transforms work (hint: yes, yes
it is).

As it turns out, you'd actually need to apply these in the order translate,
scale, rotate to get the result you've pointed out as natural. And it's the
fact that even obvious transform wizards like yourself get this wrong which
is motivating me to want us to add this affordance (Francois made a very
similar point).

Clearly talking about global vs. local isn't getting us anywhere. I'm going
to try a different tack. I'm going to invent 3 new properties, called
shmanslation, shmale and shmotation. I'm also going to work in 2D for now,
to make this clearer.

shmanslation takes two values and acts kinda the same as setting left and
shmale takes two values and multiplies the width of the element by the
first and the height by the second, scaling an image of the laid out
contents to fit the new size.
smotation rotates the div about a local origin (for arguments sake we'll
use the value specified in transform-origin) before painting it to the

(1) these properties act exactly like, oh probably 80% of web authors
naively expect transforms to act
(2) these properties layer very nicely with transforms, as the transform
property can apply 'over the top'
(3) these properties have identical effect as the transform list components
they sound suspiciously like, when applied in the order translate / scale /

What specific problems do you have with this proposal? Other than the
naming. The naming is terrible :-D

Received on Wednesday, 16 July 2014 12:21:32 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:44 UTC