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

On Tue, Feb 7, 2012 at 2:42 PM, Simon Fraser <smfr@me.com> wrote:
> 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().

Well, perspective matrices are invertible, so it should be possible to
do it using matrix3d().  Certainly it would be a lot harder.

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

I agree with that.  On the other hand, wiki pages are good to use to
accumulate arguments so they don't have to get repeated in slightly
different form over and over, which is what I started to see
happening.

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

Interesting.  So basically, transform-style: flat *visually* means
scaleZ(0), but it still preserves the z-ordering of descendants, which
is necessary for hit-testing.  Okay, that makes sense.

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

Reasonable point.

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

No need at this point.  I agree that my proposed change is not a clear
improvement.  I still harbor doubts about whether the current model is
ideal, but it's moot unless I can think of a better replacement, which
right now I can't.  So I'm fine with the status quo for now.

Received on Wednesday, 8 February 2012 20:34:07 UTC