Re: [css3-transforms] Why do we need a 'perspective' property?

On Feb 7, 2012, at 6:39 PM, Aryeh Gregor wrote:

> On Tue, Feb 7, 2012 at 4:32 AM, Simon Fraser <smfr@me.com> wrote:
>> It seems very unintuitive to use scaleZ(0) to get this effect.
> 
> I suggest perspective() imply it, so you only need scaleZ(0) if you
> aren't using perspective.  This would be a problem if you want to use
> perspective() multiple times within a single 3D scene (so the
> flattening is a problem), but I can't think of when you'd want it.
> (It would always be possible using matrix3d(), just like you can do
> matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,3) if you want that effect
> for some reason . . .)

Having the perspective property flatten seems like surprising behavior;
we may not be aware of one now, but there's probably some cool 3D effect
you can do by having nested perspectives. There's now way to get the
same effect  with matrix3d(); perspective doesn't affect *this* element, it
only affects the child elements. Authors would have to insert extra elements
to replicate perspective behavior with matrix3d().

> I wrote up a detailed proposal on the wiki:
> 
> http://wiki.csswg.org/reduce-3d-transform-properties

I added what I think it a showstopper for the scaleZ(0) suggestion, that of point mapping.
I think in general that we should keep discussion here; it's hard to "respond" to wiki pages.

> 
>> It also results in singular
>> matrices that make it impossible to map points through elements with such a transform.
> 
> Can you give a specific example where that would be a problem?

Here's a previous example of yours, hacked so that it is renderable in Safari/Chrome:

<!DOCTYPE html>
<style>* { -webkit-transform-style: preserve-3d; font-size: 54px; }</style>
<div style="-webkit-transform: scaleZ(0) perspective(200px);
-webkit-transform-origin:0 0; width:200px; background-color: rgba(0, 128, 0, 0.8)">
<div style="-webkit-transform: translateZ(100px); background-color: rgba(0, 0, 255, 0.5);">forward
<div style="-webkit-transform:rotateY(20deg); background-color: red;">
  Frontmost
</div>
</div>
</div>

Try and select the "Frontmost" text. You can't, because hit testing involves mapping points through inverse transforms, and the scaleZ(0) results in a singular matrix which is not invertible.

Here's the corresponding example using preserve-3d as currently spec'd:

<!DOCTYPE html>
<style>* { font-size: 54px; }</style>
<div style="-webkit-perspective: 200px; -webkit-perspective-origin: top left; width:200px; margin-top: 200px; background-color: rgba(0, 128, 0, 0.8)">
  <div style="-webkit-transform: translateZ(100px); -webkit-transform-style: preserve-3d; background-color: rgba(0, 0, 255, 0.5);">forward
<div style="-webkit-transform:rotateY(20deg); background-color: red;">
  Frontmost
</div>
</div>
</div>

Note that you can select the "Frontmost" text.

> 
>> Here's an example where you want perspective and flattening:
>> 
>> <div style="perspective: 200px">
>>  <div style="transform: translateZ(100px); -webkit-transform-style: flat">
>>        Some content here that should not intersect with its descendants.
>>  </div>
>> </div>
>> 
>> With current UAs, "Some content here" looks larger because the Z translate brings
>> it closer to the viewer. The scaleZ(0) hack will cause it to look smaller, because it
>> gets pushed back to the plane of its parent.
> 
> In my proposal you could replace "perspective: 200px" by "transform:
> perspective(200px)" and it would work the same.  (Plus drop the
> transform-style, of course.)  It would cause the text to possibly
> intersect with its descendants, but in this example it doesn't have
> any, so that's okay.  Do you have a specific example like this one
> where it would be a problem for the text to intersect with its
> descendants?

I think Example 4 in the editor's draft <http://dev.w3.org/csswg/css3-transforms/> is a
fine example. With intersection, half of the blue square would be overlapped by
the gray background of its container. I think authors would very often not want that behavior.

> 
>>> Is there anything that couldn't be easily replicated by using
>>> perspective(), if transform-style: preserve-3d were the default and
>>> perspective() flattened things as I describe earlier in this post?  If
>>> so, could you please give a *specific* example, like actual markup?
>> 
>> My example above is one.
> 
> I gave the markup you'd need to replicate the effect in that specific
> example.  It's almost exactly the same as what you gave, no more
> complicated.

I think we're talking in circles now. I think we need to bring other authors and implementors into this conversion.

Simon

Received on Tuesday, 7 February 2012 19:47:01 UTC