Re: Apple's Proposal for CSS Transformations

This is an interesting start, but seems to be missing some things.

First: it is possible to scale, rotate, and skew, only if you use  
transform functions; I find no CSS style parameters to do any of  
these unless you use transform functions. So, I would like to see  
style properties for all of the transform functions: transform-origin  
(I prefer the SVG 'translate'), scale, rotate, skew, and perspective  
(I prefer 'viewpoint' as it seems clearer to me than perspective and  
perspective-origin). Define the CSS styles and parameters first, then  
explain the transform functions, it will be simpler to write and to  
understand. The concept of transform functions, to simplify the  
definition of complex transformations is not bad, but for simple  
changes, they should be possible with simple CSS styles.

Second: why not make all of the styles/functions 3D? With the default  
being 0 for unused parameters, the 2D and 3D styles/functions would  
work identically without the need for a second style/function (scale/ 
scale3d, rotate/rotate3D). If this works, the extras (e.g., scaleX,  
scaleY, and scaleZ) might also be unnecessary -- I can see where they  
would be useful, but if a user can do the same thing just by adding  
one or two zero parameters, it might simplify the CSS, reducing the  
need for extra styles. (I can't be sure how this would work with the  
'matrix' functions, since it is not clearly stated what the numerous  
values mean.)

Third: how does this relate to current CSS styles? Is a translate/ 
transform-origin equivalent to 'position: relative;' or is it more  
like a float, or does the containing block just grow? How is the  
layout changed or not changed if the element is rotated (and  
therefore takes less/more space in the layout)? Do the adjacent  
elements get moved or are they placed behind/in front of the  
translated element? What about wrapping elements and text around the  
transformed blocks? Can they be wrapped tightly, or must there be  
extra margins or even right angle margins? Does a scale operation get  
communicated so that the larger/smaller element size is fit into the  
layout and the adjacent elements move, or does the original block  
size remain and the margins become larger/smaller/negative? Does a  
skew change the containing block so it is no longer rectangular,  
implying a different form of wrapping as well?

Finally: where is the explanation of 'skew'? From reading SVG, I  
think I know what this proposal means, but there is neither  
confirmation nor denial and I can't be sure.

On Nov 6, 2007, at 12:29 PM, David Hyatt wrote:

>
>
> CSS Transforms

This is a good start on some interesting ideas. Can we improve it?


James Elmore