3D projection of plain HTML using Javascript/jQuery

This script enables viewing HTML elements as through a camera's viewfinder. The optical properties of the camera are combined with the algorithms used for projection of 3D objects on a 2D plane to create the perception of depth within the viewport (viewable area) of the camera. The markup for the objects is done in really simple HTML with some CSS:

<div id="viewport"> 
	<div id="bg" class="object3d fixedsize"></div> 
	<div id="bluebox" class="object3d thickness"></div> 
	<div id="greenbox" class="object3d thickness"></div> 
	<div id="purplebox" class="object3d thickness"></div> 
	<div id="redbox" class="object3d thickness"></div> 
	<div id="greybox" class="object3d thickness"></div> 
	
	<div id="legend"> 
		Press 'W' to move forward<br/> 
		Press 'S' to move backward<br/> 
		Use mouse to move camera<br/> 
		Use mouse wheel to zoom in/out<br/> 
	</div> 
</div> 

The script uses jQuery for selections, event bindings (mousewheel, keypress events) and browser abstraction.

For a live demo, please visit http://www.fotoniq.nl/projects/jsviewfinder/ or click the screenshot:

The background image is a modified version of this photo

Concept

Each HTML element has top, left and z-index CSS properties, which may be interpreted as the x, y and z attributes of a 3D vector. When the top-left corner of the browser window is regarded as the origin (0,0,0) of the coordinate space, each HTML element can be positioned in a pseudo-3D space using its left, top and z-index CSS properties.

The concept is depicted in the following overview image: