Skip to main content

Visualize Websites in 3D With Tilt Firefox Add-on

Mozilla has released a cool, experimental Firefox extension named Tilt that lets you visualize any web page has if it’s a 3-dimensional entity. The extension takes the DOM structure of the webpage and 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 itself. The visualization is drawn using WebGL.

To test the extension, just download the XPI file from Github or from this direct download link, then drag and drop it on Firefox to open it. After installation and browser restart, open any webpage and click on Tilt from the Tools menu. Now use the mouse to maneuver the page in 3D.

tilt-firefox

Using the mouse you can control yaw, pitch, roll, pan, and zoom. You can also use the keys A,S,D,W and the arrow keys to flip and turn the page. To exit the 3D mode, press the Escape key.

Aside from the fun, there is something for the developers too.

Tilt allows for instant analysis of the relationship between various parts of a webpage 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.

Checkout the video demonstration below.

Labels:

Comments

  1. AnonymousJanuary 25, 2014 at 6:43 AM

    This addon has been permanently integrated into Firefox as "Page Inspector 3D View" since March 13, 2012.

    https://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-developer-tools-and-add-on-sync/

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.
17 comments
Read more

Diagram 101: Different Types of Diagrams and When To Use Them

Diagrams are a great way to visualize information and convey meaning. The problem is that there’s too many different types of diagrams, so it can be hard to know which ones you should use in any given situation. To help you out, we’ve created this diagram that lays out the 7 most common types of diagrams and when they’re best used:
Post a Comment
Read more

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.
1 comment
Read more