Skip to Content

The author

Epiphany Search

On the 13th March Mozilla released the latest version of their FireFox browser, now up to version 11. One of the new features that came bundled with this version is the new 3D DOM inspector which can be used to easily select buried nested elements. It does so by stacking up nested elements on top of each other so you can spin the view round and pick out the specific element from the stack that you want to inspect. The inspector renders the visualisation using WebGL and enables the user to rotate it on both the X and Y axis by dragging the image, along with being able to zoom in and out using the mouse wheel. I quite liked the effect of seeing nested elements jump out of the page when the 3D inspector button is pressed, so I thought I’d quickly make a page which when viewed in 2D does nothing but when viewed in 3D comes to life. Due to the square nature of how it visualises the elements I based my page on a city. If you want to see my 3D city in action you can view it here, or download my source code. Here is the flat view of my page: And here is the 3D view of my page: Just for fun I decided to make each building a random height every time the page is loaded, and I also added a few cars onto the road.  I did try having the cars animated and driving around the roads but unfortunately when the page is visualised in 3D it stops any animations running, so it is more of a snapshot of the page when the button is pressed.  While I think the 3D inspector certainly looks nice, I’ll probably still keep using Firebug as my DOM inspector for the wealth of features it includes such as the console, and the ability to directly edit the markup. Let me know your thoughts - you can leave a comment below!