[CSS3] transforms vs. transitions.

For the reference:
Transforms [2d] are defined here: http://www.w3.org/TR/css3-2d-transforms
Transitions are defined here: http://www.w3.org/TR/css3-transitions/

Consider this markup:

<div #container>
   <div .panel>1</div>
   <div .panel>2</div>
</div>

Designer's wish is to achieve rotating effect of these two children using 
transforms.
Rough idea is like this:

div.panel
{
   z-index:0;
}
div.panel:nth-child(1):current
{
    transform-scale: 0.25;
    transform-translate: -25% 0;
}

div.panel:nth-child(2):current
{
    transform-scale: 0.25;
    transform-translate: +25% 0;
}

div.panel:current
{
   z-index:100;
   transition-property:   transform-scale  transform-translate;
   transition-timing-function:  ease-out linear;
}


But that is not quite possible at the moment as there are no independent
properties like 'transform-scale' or 'transform-translate' - only single 
'transform' aggregate
that defines all of them. But for the need of animations as in this case
we should have them separated so it will be able to apply different timing
functions to different components of the transform matrix.

I think it makes sense to split the 'transform' into atomic properties, at 
least on
'transform-scale', 'transform-translate', 'transform-skew' parts
and to left 'transform' as it is now but to declare it as a shorthand of 
these three.

And yet it is not clear why do we need that pretty controversial matrix() 
thing:
transform:matrix(<number>, <number>, <number>, <number>, <number>, <number>)
Exactly the same result can be achieved by using scale(), translate() and 
skew().
Why such a redundancy?


-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Sunday, 27 February 2011 00:09:18 UTC