Visually Stunning Redesign Showcases the 3-D Power of CSS
To see the 3-D in action you’ll need to be using a WebKit browser (Safari or Chrome), though the site nicely degrades to a still very readable state for Firefox and other browsers that don’t yet support the 3-D rules coming to CSS. To get the full 3-D effect be sure to scroll down the page.
Wittens has a blog post detailing exactly how he pulled off the effects and he’s even built a 3-D editor you can play around with. Of the initial inspiration Wittens writes:
This idea started with an accidental discovery: if you put a CSS perspective on a scrollable
<DIV>, then 3-D elements inside that
<DIV>will retain their perspective while you scroll. This results in smooth, native parallax effects, and makes objects jump out of the page, particularly when using an analog input device with inertial scrolling.
This raises the obvious question: how far can you take it? Of course, this only works on WebKit browsers, who currently have the only CSS 3-D implementation out of beta, so it’s not a viable strategy by itself yet. IE10 and Firefox will be the next browsers to offer it.