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

On Sat, Mar 26, 2011 at 11:11 PM, Simon Fraser <smfr@me.com> wrote:

>
> On Mar 23, 2011, at 2:44 pm, Aaron Gustafson wrote:
>
> > 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.
>
> One workaround for this problem is for the author to add an additional
> container element, so the rotation and scale are set on two separate
> elements.
>


It's certainly possible to do that, but it's a hack; it requires more markup
than it should because you're asking markup to make up for a deficiency in
the spec.

Cheers,

Aaron

----
Aaron Gustafson
Principal
Easy! Designs, LLC
+1 877 EASY 313 x101
aaron@easy-designs.net
@aarongustafson