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

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

I wrote up a detailed proposal on the wiki:

http://wiki.csswg.org/reduce-3d-transform-properties

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

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

Received on Wednesday, 8 February 2012 21:28:59 UTC