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

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