[css3-transforms] What is the use-case for transform-style: flat?

The transforms spec defines a property 'transform-style', which can be
"flat" or "preserve-3d".  "flat" is the default.  "preserve-3d" means
that the children's 3D transformations accumulate in 3D space, so all
elements' boxes are moved around by the specified transformations
freely in the same 3D space before everything is flattened to 2D for
display.  "flat" means that each child is transformed in 3D by itself
relative to the parent's 2D box, then flattened to its parent,
independent of any other boxes.

Why does transform-style: flat exist -- what use-cases does it have?
And given that it exists, why is it the default?

One problem with it is that it means 3D transforms don't accumulate
the way 2D transforms do by default.  If you use only 2D transforms,
"transform: x" on a parent followed by "transform: y" on a child is
the same as "transform: x y" on one or the other (assuming origins are
the same and one or the other doesn't have any contents that are
actually painted).  But in 3D transforms, that's not true.  For
instance,

  <div style="transform: rotatex(45deg); transform-origin: top">
  <div style="transform: rotatex(-45deg); transform-origin: top">

is not the same as no transform at all, as one might expect.  Instead,
it's the same as

  <div style="transform: scalex(0.5); transform-origin: top">

This doesn't seem expected to me at all.  Where would this kind of
effect be desirable?

On the other hand, it seems like the only effect of transform-style:
flat is to flatten to the parent's plane, which is the same as
scaleZ(0).  So if you really want this effect, why can't you just add
scaleZ(0) at the start of your transform lists?

I'm guessing there must be some good reason for this feature that I'm
completely missing.  If so, maybe an explanation should be added to
the spec.

Received on Monday, 6 February 2012 17:58:18 UTC