[css3-2d-transforms] Behavior of multiple transform functions and nested transforms not defined in the spec

There are a few issues in the transform spec when multiple transform 
functions are specified.

First of all, section 2 says "The final transformation value for an 
element is obtained by performing a matrix concatenation of each entry 
in the list."  The problem is that "matrix concatenation" is not defined 
in the spec, and real-world usage differs in terms of what the result 
actually is.  In particular, in some cases the result of "matrix 
concatenation" is the matrix product of the matrices in the order given 
but sometimes it's the composition of transformations performed in the 
order given.  The spec presumably wants the latter meaning, not the 
former one, but the only way to tell is the non-normative example II in 
section 5.  Section 5 also has some normative text describing a 
multi-function transform in terms of nested transforms, but does not 
clearly describe what the net effect is of nested transforms, so doesn't 
help much.  In particular, nothing in the spec really defines the 
behavior of those nested transformed divs; it's impossible to implement 
the spec as things stand without reverse-engineering implementations.

Second, the behavior of translate() (and also translateX() and 
translateY()) is somewhat counterintuitive when rotations are involved. 
  In particular, this transform:

   rotate(90deg) translateX(100px);

will translate _down_ by 100px if there are no other transforms 
involved.  This makes sense as long as you keep in mind that transforms 
transform coordinate systems, not rectangles, so that a translateX does 
not necessarily move in the viewport x-direction because it might be 
happening in a transformed coordinate system.  However the spec keeps 
talking about transforming "elements" and moving/rotating elements, 
which seriously confuses the issue.  Trying to create an example like 
section 5 example II with the translate _last_ in the transform and 
trying to use language similar to the current example II language to 
describe what's going on fails miserably....

I think the spec needs to clearly specify that:

1)  Transforms affect the coordinate system, period.  Any effects on 
actual boxes are just a result of them laying out in the coordinate 
system.  Examples of the difference might be a good idea; see below.
2)  When elements with transforms are nested, the coordinate system 
transformations are applied from the outside in.

and add some examples where a translate or a skew comes after a scale, 
as well as after a rotate.

-Boris

Received on Wednesday, 25 May 2011 16:42:45 UTC