Firefox 3D view

Here's the blog post in which I introduced the feature...<p><a href="http://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-developer-tools-and-add-on-sync/" rel="nofollow">http://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-dev...</a><p>The 3D view is not "every day" useful, but people have found it to be a quick way to spot unexpected nesting issues.<p>As noted elsewhere, this feature started life as an add-on made during Google Summer of Code 2011 by Victor Porof, who continues to work on Firefox developer tools today.<p>(in case you hadn't guessed, I work for Mozilla... usual biases therefore apply ;)

2010:<p>"Check out this site. Design is awesome."<p>"Yeah but did you view source? Terrible semantics and inline css."<p>2012:<p>"Check out this site. Design is awesome."<p>"Yeah but did use 3D View? The element stacking is terrible. Doesn't have those nice symmetrical pyramids you like to see."

This post has a nice writeup on how this 3D view helped find an XSS vulnerability in a webapp: <a href="http://drewgoodwin.com/posts/2012/07/17/firefox-3d-view-helps-spot-xss-vulnerabilities/" rel="nofollow">http://drewgoodwin.com/posts/2012/07/17/firefox-3d-view-help...</a>

Cool. To see it, turn on inspector (right-click page, inspect element) and on the info bar at the bottom is a "3D View" button. Try both mouse buttons and the mouse wheel.<p>Too bad they didn't put some inertia in it, it would be fun to flick around the webpage.

"This content covers features introduced in Firefox 11"<p>We're now on Firefox 14. It's reasonably old.

In a similar spirit, I wrote a crumpled paper web browser around an IE instance in WPF once: <a href="http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-web-browser-suitable-for-harry-potter-in-wpf.aspx" rel="nofollow">http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-w...</a><p>Not very useful, but a cool effect. Life is much better when we can host web browser instances as textures. Geometry (as in this case) would allow for even better effects; I feel bad that I never thought of that!

It's been around as an addon for a while, I think it was put into FF at version 11 (March 2012). I really think it should have remained as an extension, it looks neat but is pretty useless.

I opened a long page, tilted a little, reached the end, and pressed the down button to scroll the page up. Heavens! It's like watching the first scene of Star Wars.

"Use cases ... it looks <i></i>awesome<i></i>". Heh.

finally, you can see what's behind each website!<p><a href="http://i.imgur.com/PiNtn.png" rel="nofollow">http://i.imgur.com/PiNtn.png</a>

Nice feature but poor UI (controls) for me. Zoom (mousewheel) and rotate (left click) should take place around the cursor (or the 3d space it is currently hovering over) rather than the centre of the screen. Makes things much easier for the user (especially the power-user, who this is aimed at and can spare the 30-seconds to figure out how it works).<p>As an extra, clicking the mousewheel down should allow you to 'pan' (rather than 'rotate' on mouse1)...<p>Would make things much nicer...

this has been around for a while now...

I was all ready to say "What the hell are people still talking about 3D web browsers for?", but that's actually kind of neat.

Go to facebook page and try it. It is almost like Manhattan in 3d

i use something similar for WPF called Snoop. these types of things are also useful when you're trying to see the complexity or optimize the nesting levels of your controls.

If I had a fast enough machine, I'd like to capture some zooming, panning and rotating of my SVG based application for a schnazzy eye-candy video.

Oddly enough, I've actually used this exactly once. If you've got phantom elements sitting over something it can be quite useful to visualize them

Are you still able to interact with the document whilst in 3d mode? e.g. test jQuery animations, etc (unfortunately can't try it myself)

As someone who teaches intro to HTML classes, 3D view is a cool way to explain divs, spans, etc.

Does anyone know if Chrome are planning to follow suit?

can someone tell me how to get this to actually work? I'm on firefox 15 and I don't see this feature?

it's not new? that's why i'm using firefox as a developer. It is awesome!

Utterly useless.

old news<p>still, pretty cool