Parallaxed 3D in CSS3

We know that HTML5 Canvas with smart JavaScript can do lots that Flash with ActionScript can do. This is exciting, because it replaces a proprietary technology with JavaScript: it represents another step in the direction of browser-as-platform.

But this means the browser isn't doing much, except interpreting JavaScript. (Okay, that's a lot, but think of it like any other platform: you don't credit Windows with most of its apps.)

CSS3, on the other hand, leaves a lot more wiggle-room for browser implementation -- especially in its more experimental features like 3D transforms.

So CSS3 performance depends, not only on JavaScript interpreter speed (in which IE9 is best), but also on how the browser implements the spec (in which IE9 is still a bit quirky).

As a result, this website (by Steven Wittens) looks cool, but not terribly awesome in any non-Webkit browser:

But open it in a Webkit browser (Chrome or Safari), and start scrolling down.

Real space opens up to two simulated eyeballs -- thanks to the browser, to CSS3, and not to a full JavaScript 3D engine like Three.js.

You may ask: why not use WebGL for in-browser interactive 3D? You may already know the answer, but as Steven explains:

There's WebGL in Chrome and Firefox that can be used to do similar things, but WebGL is its own sandbox: you can't put DOM elements in there, or use native interaction. And any amount of WebGL rendering in response to e.g. scrolling is going to involve some amount of lag.

In other words, CSS3 is tigher-knit with the rest of the page. 

You can see this in Steven's impressively original stylesheet (unminify here), which is grounded in the preserve-3d transform-style (which you'll notice has an important  question still open in the spec) and includes such careful use of the perspective property as this:

html.js div.perspective {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective-origin: 50% 0;
    -webkit-perspective: 800px;
    -moz-perspective-origin: 50% 0;
    -moz-perspective: 800px;
    -o-perspective-origin: 50% 0;
    -o-perspective: 800px;
    -ms-perspective-origin: 50% 0;
    -ms-perspective: 800px;
}

(Okay, that's not the most exciting CSS in itself. But the perspective-origin will become more interesting when you browse the rest of the code.)

Steven even wrote a 'how I did it' with the informative title 'Making Love to Webkit', especially useful if you're interested in both coding and design.

So demo the site, read about Steven's Webkit love, and check out the CSS (unminified) to see how far CSS3 transforms can transport you into real space.