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

===
Apologies if you receive this twice, but it didn't appear to go through the first time and isn't appearing in the archive, so I'm guessing the first time didn't go through.
===

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:32 UTC