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 14:46:23 +1000
Message-ID: <CAGTfzwTyRB6_625ktnFFT9fhaazaDbHPZ_xnxG_LQJ6MqMFuwQ@mail.gmail.com>
To: Dean Jackson <dino@apple.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Dirk Schulze <dschulze@adobe.com>, www-style list <www-style@w3.org>
> I think this highlights part of our disagreement!! Mathematically, these
> are never independent of each other: the order always matters if translate
> is involved (assuming there is more than one of the functions :)

Mathematically, each transform component can be thought of as a function
that maps position to transformed position. The order we're defining has
the property that these functions remain faithful in the global coordinate
space (as well as the local coordinate space, where they're always

For example, a translation in X by 100px can be thought of as taking (x, y)
to (x + 100, y). A rotation by 45 degrees can be thought of as taking (x,
y) to (0.7x + 0.7y, 0.7x - 0.7y).

In an order that requires translation first, then these (linear, abelian)
operations can apply either order to get the correct result. They are order
(x, y) -> (x + 100, y) -> (0.7x + 70, 0.7y)

In an order that puts rotation first, these operations will never give the
correct result.

> [I exaggerate slightly: it also doesn't matter in some edge cases such as
> an identity like rotate(0). But if translate is in there, they are
> dependent. ]
> You absolutely need to tell the treasure hunter whether to walk 20 paces
> then turn left, or turn left then walk 20 paces.

Nobody is disagreeing with you - there are situations that require order
dependencies to understand them. On the other hand, if I were to say that I
wanted this div at (0, 0) to be at location (200, 500) on the screen, at an
angle of 10 degrees, and scaled up by 1.1 in x and 1.2 in y, then I want to
be able to specify that as
translate: 200px 500px
rotate: 10deg
scale: 1.1 1.2

Note that these are faithful to the requested position, shape and angle! I
*don't* want to have to muck around with all 6 possible orderings of these
three components until I find the one that has this property.


> Dean
Received on Wednesday, 16 July 2014 04:46:50 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:23 UTC