We’re not quite at the stage where we can fly through the Internet in 3D à la Johnny Mnemonic, diving between skyscrapers of data and along streets of shimmering bytes. Until then, we’ll have to make do with visualising our web pages in 3D which is still pretty futuristic, if you think about it.
3D it! from Edan Kwan is a bookmarklet that uses 3D CSS transforms to turn any web page into a moveable, (partially) rotateable 3D object which displays elements closer to the viewer the deeper they’re nested in the DOM. As it’s just standard JS with CSS doing the graphical heavy-lifting, the page is still fully interactive – hover states, links, selectable text, the lot. It can struggle a bit with larger pages but for the most part, it’s fun to launch it all over the place. Try it out on this page!
Firefox users have had access to something similar since the middle of last year – the Tilt 3D extension* creates a 3D visualisation of the current page using WebGL. Being powered by some more heavy-weight JS, this one is very smooth and completely rotatable but only available in Firefox. Whether it helps in web development depends on your working style but there’s no doubt it’s fun to pretend to be Keanu Reeves.
*As Alex Turnbull points out, the tilt extension now is integrated into the latest version of Firefox.