How Is XKCD In 3D?

When I first visited xkcd this morning, I was immediately temped to use the F word – Flash. A little right-clicking though revealed that this was not the case, which led me to the the golden question of the day – how?

What xkcd did today is an incredible demonstration of how a little knowledge of CSS can go a long, long way.

The comics are actually several PNG files layered on top of each other using absolute positioning:

… since #comic is using relative positioning, as opposed to the default static positioning, any absolutely positioned elements inside <div id="comic"> are positioned with respect to <div id="comic">. By manipulating all the images/layers individually it creates a 3D-looking effect.

Try This at Home

If you want to skip the trying part and just see the result, I posted it online.

Each of these layers is supposed to appear further away than the last, so use some style attributes along with the CSSwidth property to make them appear smaller: (see one point perspective on wikipedia)

Give it a try! Mind you, xkcd is using some significantly more interesting math (parallaxes and stuff like that…I don’t know anything about paralaxes which doesn’t involve the destruction of Coast City…)

For those interested, here are the layers from today’s comic (01/04/2011) which has 25 layers – some of them are the same image repeated, and some of them are re-sized using CSS: (all these images are from xkcd.com)

These ‘box’ around the web comic.
The handle to the girl’s (Megan?) bike
The corners: these ‘corners’ are repeated, just like in the above example I wrote.
The girl’s (Megan?) bicycle.
The girl’s (Megan?) herself.
The desk
I have no idea what this one is for… it’s empty.
The guy’s (Cueball?) computer.
The desk corners, which move independant of the desk
The guy (Cueball?) himself
The webcomic text