Most of us have had a play with CSS3 3D transforms, stacked a few elements, rotated them, maybe even made a cube out of them. And somewhere along the way, you'll probably have set the perspective property, tweaked it, wondered what it did, tweaked it some more, figured it looked ok and then forgot about it.
With some time on my hands I thought I'd dig into the problem and see if I couldn't relate perspective back to the more common 3D camera properties of subject distance and field of view. So I created a simple 3D scene in CSS, added a slider to adjust the perspective and then set about creating a WebGL equivalent.
CSS
WebGL
As the examples prove, the perspective property is in fact just the subject distance but with one additional feature: whenever the subject distance is changed the field of view is automatically adjusted such that the size of any element on the z=0 plane remains constant.
If this sounds like something you've seen before, the likelihood is you probably have! Commonly employed when the director wants to create an unsettiling sense of unease, the dolly-zoom effect has been used in films such as Jaws and Vertigo.
The source code to all of this can be found on Github.
Happy hacking!