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

On Feb 6, 2012, at 9:05 PM, Aryeh Gregor wrote:

> On Mon, Feb 6, 2012 at 2:59 PM, Simon Fraser <smfr@me.com> wrote:
>> But it's not just for performance. The 3D rendering model, as
>> described in the section of the spec that describes the notion of
>> 3D rendering contexts, brings in a number behaviors which
>> are very different to the existing 2D rendering model, and potentially
>> confusing for authors, for example intersection, and different front-to-
>> back rendering order. It seems logical that the author should opt-in
>> to this behavior by using preserve-3d.
> 
> What's a specific case where transform-style: preserve-3d would be
> confusing to authors?  I think this is a case where transform-style:
> flat would be very confusing to authors:
> 
> <div style="transform:rotatex(45deg)">
> <div style="transform:rotatex(-45deg)">
> Some text
> </div></div>
> 
> I would expect this to be the identity transform.  Instead, it's
> equivalent to scaley(0.5).
> 
>> I also think that in many cases authors won't need to use preserve-3d
>> at all. If all you need is a single element which looks like it's receding
>> towards the horizon, you can do that with transform: perpsective(500px) rotateY(45deg).
>> You only need to start using preserve-3d if you're building "3d models"
>> by transforming elements in a hierarchy.
> 
> Sure, but in that case flat and preserve-3d are the same, so either
> one works just as well.  What's a specific case where authors would
> want flat and *not* want preserve-3d?

You'd use transform-style: flat if you want some subtree of your content
that uses 3D transforms to appear flat to the rest of the page. For
example, suppose that you have a rotating cube, made from 6 transformed
elements. But you want to to be able to flip over the parent of the cube,
making it look as if the cube were being projected onto a flat surface.
In that case you want to "flatten" the cube, and not allow any of the
cube faces to intersect with the parent element which is being flipped over.

> 
>> preserve-3d has no visible effect if there are no 3d transforms on elements
>> beneath the element with preserve-3d.
> 
> Then what did you mean by "new behavior which can affect elements
> which don't have transforms applied to them directly"?  Can you give
> me a specific example?
> 

preserve-3d enables element intersection, so a rotateY(45deg) on an element
will cause that element to intersect with its parent, or with untransformed siblings,
even if those siblings or the parent do not themselves have a transform.

In some cases this results in very unexpected behavior. For instance, if
preserve-3d were the default, transform: rotateY(45deg) would cause the
element to intersect with its parent, so the right half of the element would disappear
behind that parent if the parent has painted background or content, and the right
half would not respond to mouse events.

(That reminds me that I should say something in the spec about the effects
of 3D transforms on hit testing.)

Simon

Received on Monday, 6 February 2012 20:30:24 UTC