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

On 06/02/2012, at 9:57 AM, Aryeh Gregor wrote:

> 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?

It's a combination of preserving some concept of the way a non-3d web
works and implementation concerns. In general, the idea was that most
people would use 2d transforms and we should optimise for that case.

Preserving 3D is actually a little complex (see the mozilla bugs where
there are some expletives trying to work out how it was implemented
in webkit - now Simon is writing the spec text to explain it better).

> 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?

That's not quite true. Scaling anything to 0 doesn't really flatten it,
it makes it disappear. Also, I don't believe a scaleZ(0) would necessarily
take the perspective into account. Also also, it's a bit weird because
elements don't really have any depth, so scaling in Z was always confusing
(it only made some sense with things that were already rotated from the flat
plane).

What preserve-3d actually does under the hood is play with the nesting
of content - what looks like a child in the DOM might end up as a sibling
in the compositing engine. This has overhead that can't be turned on
for all transforming content.

Dean

> 
> 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 20:22:59 UTC