Over a million developers have joined DZone.

Parallaxed 3D in CSS3

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}