Tilt is a fun new Firefox extension focused on creating a 3D visualization of a webpage, drawn using WebGL. Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering.

Various information besides the actual contents will be displayed on request, regarding each node’s type, class, id, and other attributes if available. The rendering will be dynamic, in-browser, using WebGL and GLSL shaders.

Tilt also offers the possibility of inspecting the html, css, and attributes of each node in the DOM tree, refreshes its contents if the webpage has been modified with other tools such as Firebug, and exporting the webpage to a 3D mesh or a screenshot.

For Addons

For compatibility, this add-on will require WebGL capabilities. Go to http://get.webgl.org/ to check availability and troubleshoot any issues.

To start Tilt, hit Control+Shift+M (or Command+Shift+M if you're on Mac OS, or go to Web Developer -> Tilt, available in the Firefox application menu (or the Tools menu on Mac OS). You can change this hotkey from the Options menu inside Tilt.