W3C home > Mailing lists > Public > www-style@w3.org > February 2012

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

From: Chris Marrin <cmarrin@apple.com>
Date: Tue, 07 Feb 2012 14:59:53 -0800
Message-id: <4C8D999F-845C-4B3E-AD09-CEA376C2E948@apple.com>
To: "www-style@w3.org list" <www-style@w3.org>

On Feb 7, 2012, at 11:42 AM, Simon Fraser wrote:

> 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 think Simon makes the most important point here. The perspective property does not add perspective to any existing transform. When you put it on an element it affects only that element's kids. It's like a free transform element inserted into the tree for you. The perspective() function is really just there for you to play simple perspective tricks, like making an element look like a trapezoid when it's really a rectilinear box. This can be applied to flattened layers, so it can be a simple visual effect. It's ripe for abuse :-)

The perspective property was added to give you a simple way of creating perspective 3D scenes. Add in a few transform-style:preserve-3d properties and you can do cool flying boxes without any extra structure.

-----
~Chris
cmarrin@apple.com
Received on Tuesday, 7 February 2012 23:04:10 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:50 GMT