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

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.

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>

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

Received on Wednesday, 8 February 2012 21:23:13 UTC