Visualize Any Webpage in 3D Using Tilt Plugin

tilt 3d plugin for firefox icon

If you are a developer then this plugin will become one your most used plugin and if you are not a developer then you’ll have fun visualizing webpages into 3D.

Non developer’s description:

Tilt plugin for Mozilla Firefox creates any webpage into its 3D vision highlighting all the contents on a stacked base. You can rotate the page, flip-backside, get into each component deeply and you can enjoy by seeing how any webpage which is presented to you is made actually.

Developer’s description:

tilt 3d plugin for firefox iconTilt uses WebGL (Web Graphics Library) for displaying the 3D visualization of any webpage. The DOM have a tree like structure where all the division and the components are placed in a parent-child relation, Tilt uses the same concept for displaying the pages in 3D. The parent is placed at the bottom of page and its child at the top hence creating a stacked structure for each element, having a corresponding depth and it is textured according to webpage rendering by the browser.
Tilt provides the functionality of inspecting any html, javascript, CSS attributes of any node on the webpage.

Read: Get color values of any color from a webpage

A video about Tilt and its details

Installation

Tilt is a developer tool which can be installed in a similar way as most of the extension/addons in Firefox. There this guide which will help you to install them if you are new to such installation. You’ll find useful links (like the Mozilla addon page for Tilt) in our useful links section.

Usage

  1. To start using Tilt just press Control+Shift+M (or Command+Shift+M for Mac)
  2. Click on any element and you’ll get the tree structure of its parents
  3. To view the CSS for any component, select the component and press the “Style” button
  4. To stop Tilt plugin press Control+Shift+M again and your webpage will return to normal 2D style
  5. For more details using Tilt plugin you can visit its Homepage/Blog

Useful Links

  1. Tilt plugin Mozilla Firefox page
  2. WebGL
  3. Tilt Blog
  4. How To: install addons/plugins in Mozilla Firefox
  5. More Developer Tools like this.

Screen Clipping

screen clipping for tilt 3d plugin

Leave a Reply

Your email address will not be published. Required fields are marked *