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

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

> On Mon, Feb 6, 2012 at 3:08 PM, Simon Fraser <smfr@me.com> wrote:
>> They do, that is correct. If you set the perspective via the transform property,
>> then you also need transform-stye: preserve-3d so that child elements share
>> the same 3D rendering context. But I don't think you want 'preserve-3d' to
>> be the default behavior here either, because it will cause children rotated
>> in Y to intersect with the background of the element with perspective. You lose
>> the ability to use an element as a "3D stage", and keep the 3D transforms contained
>> within it.
> 
> Okay, so an example is something like
> 
> <!doctype html>
> <div style="perspective:200px;perspective-origin:0 0;
> width:200px;background:lime">
> <div style="transform:translatez(-100px)">
> Some faraway text</div>
> <div style="transform:translatez(100px)">
> Some close-up text</div>
> </div>
> 
> If you used transform-style: preserve-3d, "Some faraway text" would
> vanish.  But if you don't, then perspective() won't work.  That's a
> specific example, good.

Yes, that's a good example.

> However, if scaleZ(0) is implemented as it geometrically should be (as
> it is in Chrome), this works just the same:
> 
> <!doctype html>
> <style>* { transform-style: preserve-3d }</style>
> <div style="transform:scalez(0) perspective(200px);
> transform-origin:0 0;width:200px;background:lime">
> <div style="transform:translatez(-100px)">
> Some faraway text</div>
> <div style="transform:translatez(100px)">
> Some close-up text</div>
> </div>

It seems very unintuitive to use scaleZ(0) to get this effect. It also results in singular
matrices that make it impossible to map points through elements with such a transform.

> So transform-style: flat really is just scalez(0) if you get rid of
> 'perspective'.
> 
> Is there any use-case where you'd want perspective() but would not
> want flattening, or vice versa?

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.

> If not, why not make perspective()
> imply scalez(0)?  I.e., make perspective(X)
> 
>  matrix3d(
>    1,0,0,0,
>    0,1,0,0,
>    0,0,0,-1/X,
>    0,0,0,1)
> 
> with a 0 instead of a 1 in entry 3,3.  That would make the example I gave just
> 
> <!doctype html>
> <div style="transform:perspective(200px);
> transform-origin:0 0;width:200px;background:lime">
> <div style="transform:translatez(-100px)">
> Some faraway text</div>
> <div style="transform:translatez(100px)">
> Some close-up text</div>
> </div>
> 
> which I think is every bit as simple as the original one, except
> having to use fewer different properties.
> 
>> In the copious content that we've written, we've made extensive use of
>> the transform-style property, both preserve-3d and flat, to control the
>> scope of 3D rendering contexts. I think we need to keep it.
> 
> 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.

Simon

Received on Tuesday, 7 February 2012 09:36:31 UTC