Re: [Transforms] perspective description

On 10/10/2013 12:52 PM, Dean Jackson wrote:
> "The perspective and perspective-origin properties can be used to add
> a feeling of depth to a scene by making elements higher on the Z axis
> (closer to the viewer) appear larger, and those further away to
> appear smaller. The scaling is proportional to d/(d − Z) where d, the
> value of perspective, is the distance from the drawing plane to the
> the assumed position of the viewer’s eye.”

That's one way of looking at it but I'm have always seen d as a point 
that is relative to the plane of the viewport Z=0. Where d is moved 
backwards, up or down or to the left side or right side (depending of if 
the element is rotated itself along the x or y axis).

> This is sort-of true, but misleading and confusing. The key is
> “assumed position”, because it isn’t as if the viewer is really
> placed at d along the Z axis. If that were the case then simply
> adding perspective would make everything smaller. e.g.
>
> <style>
> .container {
>      perspective: 400;
>      width: 100px;
>      height: 100px;
> }
> .box {
>      width: 100px;
>      height: 100px;
>      background: blue;
>      transform: translateZ(0);
> }
> </style>
>
> <div class="container">
>      <div class="box"></div>
> </div>
>
> The above wording would imply that changing perspective to 800 would
> make the box smaller. It doesn’t. The box is always going to be
> 100x100 while it is at Z=0.

Correct. BTW, 'perspective: 400' is invalid.

> I suggest we update the wording to emphasise the bit about how
> movements along the Z axis have a proportional change in element
> size. i.e. if you translateZ(perspective/2) your element will scale
> by a factor of 2. Then we can explain that this is because we place
> the viewer at the perspective location, but always draw Z=0 at
> natural size. This is basically just the reverse order of what we
> have now.

This is just making another ambiguity. If the perspective is explained 
by saying that we have placed the viewer at the perspective location, 
then how can you explain why the value for translateZ(400px) (using the 
same CSS above) would make the box disappear from view?

The illustration and assumed eye position is misleading because none of 
this is really happening because every thing is relative and somewhat 
anchored to the veiwport or z plane. We only trick the viewer into 
believing that they are positioned in 3D space as a painting on some 
wall does.

> The other benefit of this is that it explains why infinite
> perspective means everything looks flat: there is no amount you could
> move along the Z axis in order to make a proportional change in size.
> However, the confusing thing is that we say "perspective: none" to
> mean infinite :)
>
> Dean

I would believe that "perspective: none" should mean no depth. Not 
infinite depth/(depth − Z). Perhaps the spec should described 'depth of 
field' and define the depth as relative to the viewport and indicate 
that it is a trick of the eye(s) r veiwer that we perceive 3D space on a 
flat canvas.

Alan


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Thursday, 10 October 2013 06:04:28 UTC