[Transforms] perspective description

From: Dean Jackson <dino@apple.com>
Date: Thu, 10 Oct 2013 12:52:18 +1100
Message-id: <121C24DC-B2C8-40AE-A40B-78F1AB3C0D5B@apple.com>

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

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.

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.

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
Received on Thursday, 10 October 2013 01:52:52 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:49:47 UTC