Visualize a Webpage in 3D Using the Firefox Browser
I have just discovered a nice tool in my Firefox web browser. It is high on the "cool" index so I thought I would share my find here. I am taking a crash course in website development and getting a whole new perspective on what goes on "behind the screen". And I mean that quite literally.
If you have Firefox (I have version 18.0.2 running on Windows 7) click on the Tools menu, then select Web Developer, then select Developer Toolbar. A dark grey toolbar will appear at the bottom of the page. You can type help next to the flashing cursor to get a list of available commands. There is a tool which can be used to visualize a webpage in 3D. The command is called tilt. To get a description of the command and some options, type help tilt. You will see:
As you can see, the tilt command "investigates the relationship between various parts of a webpage and their ancestors in a 3D environment". To activate the tool, type tilt open. You should see the graphics on the current webpage move back a bit and then fragment a bit like the pieces of a puzzle. Now here's the cool part...
Push and hold your left mouse button while moving your mouse. Voila! The webpage rotates on all axes in three dimensions. How cool is that? You can even flip the page around and look at it backwards! So why would you want to do this? Well, you can immediately see how the various graphical layers of the page relate to one another. If you click on one of the block elements it will become shaded. How is that particular element constructed in the page HTML code? Here is how you find out...
Above the command line, locate the second icon which looks like three stacked rectangles. Click this icon to display the Markup Panel. With the Markup Panel showing several lines of code, just click on any element and you will see the corresponding HTML code appear. If you are wondering which website appears in my photos, it's AOL.
There are many other tools to be discovered in the Web Developer menu section. Take a few moments to explore them!
Just for fun, here's one more. This is the Facebook login page in 3D:
Still not impressed? Well, here's the page your are reading right now in 3D!
