Ever wondered if you could visualize your website in 3D? Well, here’s one such Firefox extension that allows you to do so. Tilt 3D is a Firefox add-on that lets you visualize any web page DOM and provides the relationship between various parts of a website in 3D. Tilt is developed by Victor Porof, Cedric Vivier and Rob Campbell. Rob Campbell was the one who first thought about creating a 3D visualizations of a web page.

All of this started as a Google Summer Code project. With serious brainstorming sessions and an enthusiastic team behind, they came out with many new features and ideas, it has now become an active Developer Tools project. This tool lets you visualize any web page as if it’s a 3-dimensional entity. The tools takes the DOM structure of the web page and based on the nesting, it layers each node in the web page. The visualization is drawn using a WebGl.

Tilt allows for instant analysis of the relationship between various parts of a web page in a graphical way, but also making it easy for someone to see obscured or out-of-page elements. Moreover, besides the 3D stacks, various information is available on request, regarding each node’s type, id, class, or other attributes if available, providing a way to inspect (and edit) the inner HTML and other properties.

Tilt is an experimental add-on for Firefox. To visualize a website, you need to download the XPI file from Github or direct download it from here. Once you have downloaded the file, drag it to your Firefox window to open it. Restart Firefox after the installation. Open any web page and click on Tilt from the Tools menu. Move your mouse to view the page in 3D.

Tilt 3D Controls

Controlling the visualization is achieved using a virtual trackball, that rotates around X and Y axis. You can activate the tool by simply pressing Ctrl + Shift + M (or Cmd+Shift+L if you’re on a Mac) and then use your mouse or the arrow keys to flip, turn, zoom or rotate the page. You can use the keys A,S,D,W as well. Double clicking a node will bring up the Ace Cloud9 IDE editor through which you can view additional information and the inner HTML.

Video Demonstration of Tilt 3D:

You can rotate to view the web page in any angle. By rotating the page by 180°, you can view how a web page might look from behind.

Check out the video demonstration of the tool below:

You can exit the 3D visualization mode by pressing the Escape key.

The team is working on to add more features to this tool, some of which include – modifying and updating the 3D web page, rendering elements with absolute position or floats differently, creating more developer-friendly environment and better integration with Ace editor.

How useful is Tilt 3D?

The source code for Tilt 3D is available for download on github. Overall, the tool looks great and fun to play with. However, it isn’t useful for all users. Developer would love the tool and the features it provides. If a standard DOM tree model has not done clarity to you, maybe Tilt 3D will help you.