How to Use Firefox’s Web Developer Tools to View Website Structures in 3D

Firefox 11 added two new web developer tools to Firefox’s already impressive arsenal. The Tilt feature visualizes website structures in 3D, while the Style Editor can edit CSS stylesheets on the fly.
The 3D feature, known as Tilt, is a way of visualizing a website’s DOM. It integrates with the existing Document Inspector and uses WebGL to display rich 3D graphics in your browser.

Tilt – 3D Website Visualization

You can access Tilt from within Firefox’s Page Inspector. To get started, open the Page Inspector by selecting “Inspect” from the Web Developer menu. You can also right-click in the current page and select “Inspect Element” to start the inspector at a specific element.

                                         Click the “3D” button on the inspector toolbar.

             You’ll see the page’s structure after activating 3D mode, but it will look flat until you rotate it.

 Rotate the model by left-clicking, move the image around by right-clicking, and zoom in and out using the mouse wheel.

 This view is integrated with the other tools in the inspector. If you have the HTML or Style panels open, you can click an element on hte page to view that element’S HTML code or CSS properties.