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

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

From: Aaron Gustafson <aaron@easy-designs.net>
Date: Wed, 23 Mar 2011 17:44:54 -0400
Message-ID: <AANLkTi=nY3FRD_eAo_atvg6a-f7TAmRP3Yatcz7i02MC@mail.gmail.com>
To: www-style@w3.org
The issue(s): Based on the current model, it is difficult for authors to
manage compound transforms for transitions as well as in the context of the
cascade. This issue is exacerbated when it comes to dynamic manipulation
(via script) because most browsers supporting transforms currently only
expose the current transform state as a matrix, which is not human-readable.

Consider this example:

#demo {
  transform: scale(2);
}
#demo.state-1 {
  transform: scale(2) rotate(45deg);
}
#demo.state-2 {
  transform: scale(2) rotate(90deg);
}

The scale value must be maintained in each instance of transform, which is
overly verbose and is roughly equal to only having the font shorthand and
having to set the whole font stack, size, line-height, etc. every time.

Possible solution: Transform longhand.

What if we could do something like this instead:

#demo {
  transform: scale(2);
}
#demo.state-1 {
  transform-rotate: 45deg;
}
#demo.state-2 {
  transform-rotate: 90deg;
}

This is a simple example, but this concept would solve so many problems when
it comes to managing complex transform stacks and would be incredibly
helpful for managing CSS-based transitions.

Thoughts?

Cheers,

Aaron
Received on Thursday, 24 March 2011 19:32:53 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:38 GMT