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

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.

Simon

Received on Sunday, 27 March 2011 03:12:29 UTC