- From: Dean Jackson <dino@apple.com>
- Date: Thu, 10 Oct 2013 12:52:18 +1100
- To: public-fx@w3.org
"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