[From Fast Co.CREATE]
Make Any Web Page 3-D With 3-D It!
Developer Edan Kwan created a program that, when bookmarked, uses CSS to convert any website to glorious 3-D. Glasses optional.
By Joe Berkowitz
May 9, 2012
It started as a fun little experiment, in three dimensions.
Edan Kwan, a developer at New York-based digital agency, Firstborn, had the thought that others might share his fascination with what websites would look like with a 3-D makeover. Lo and behold, pretty soon he’d created a program that uses CSS to do just that, turning 3-D into a verb in the process.
Users can simply drag the script to their bookmark bar and use it to click and transform any typically flat site into one that gives the illusion of containing a Z-axis.
The idea of 3-D it! was inspired by an old tech development and movie industry saying, If you can’t make it good, make it 3-D. Kwan didn’t initially intend to do much with his creation, though. “I sent the script to the Firstborn internal developer team as a joke,” he says. “After that, my colleague suggested I create a lab page where people could access it and have a little fun of their own. I spent some time creating a lab page and put it up online and within weeks it started getting some buzz and the daily site visits went from below 100 to around 12,000.”
The easy usability is partly responsible for the popularity of the bookmarklet, which spread beyond the typical audience of programmers after some initial tweets, and went on to hit everyday Internet dwellers who wanted to view their favorite sites in 3-D.
As easy it is to use, though, putting it together wasn’t so simple. “The most difficult part of creating the effect was figuring out a way to make the 3-D look good universally, since you can apply the bookmarklet to all kinds of HTML sites,” says Kwan. “Using some simple logic, I found a way to separate the different elements on the page into different layers. To make sure it looks best, the layers could not be too close or too far apart.