W3C home > Mailing lists > Public > www-style@w3.org > March 2011

Re: [css3-2d-transforms] "longhand" for the transform stack

From: Aaron Gustafson <aaron@easy-designs.net>
Date: Thu, 24 Mar 2011 18:14:08 -0400
Message-ID: <AANLkTimLb6RT4=oknUEeH8YoUfxDn7KodsoNnXZrLase@mail.gmail.com>
To: "L. David Baron" <dbaron@dbaron.org>
Cc: www-style@w3.org
On Thu, Mar 24, 2011 at 4:22 PM, L. David Baron <dbaron@dbaron.org> wrote:

> The issue here is that the values of 'transform' are an *ordered*
> list of transformations.  For example, the following two transforms
> are different:
>  translateX(100px) rotate(45deg)
>  rotate(45deg) translateX(100px)
> So if we wanted longhand transform properties, we'd need to give the
> one true order for the operations, and say how those operations
> interacted with the ones in the 'transform' list (which *can't* be
> decomposed into subproperties since it's an ordered list, and
> decomposing it would lose that order).

That certainly makes sense and is something I hadn't considered, but I do
still think we should look for some balance. On one hand there's the
incredible power inherent in specifically ordering your transformations and
on the other hand there's a desire to easily (and with limited repetition)
being able to successfully manage ever more complex stacks of

I'm just spitballing, but here are a few thoughts:

1) Probably the simplest option: an "ordered" prefix/suffix -
transform-ordered (or ordered-transform) for instances when you want to
control the full stack in a specific, ordered way; transform itself would
follow a prescribed order that would also affect longhand versions of the

2) Adding a priority to each transformation. This probably requires an

#foo {
  transform: translateX(100px, 1) rotate(45deg, 2);
  /* translateX applied first, then rotate) */
#bar {
  transform: rotate(45deg, 2) translateX(100px, 1)
  /* translateX still applied first, then rotate) */
#foo.state-2 {
  transform-rotate: 45deg, 1;
  /* rotation now given higher priority in transformation stack */

Of course, under this rubrick, my guess is that you'd want the cascade to
resolve conflicts in priority (where 2 transformation methods have the same




Aaron Gustafson
Easy Designs, LLC
Received on Thursday, 24 March 2011 22:15:02 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:44 UTC