[Transforms] perspective description

"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