Visually Stunning Redesign Showcases the 3-D Power of CSS

Steven Wittens' Acko.net features an impressive and unique 3-D header.

It’s one thing to hear about the powerful new 3-D tools coming to CSS, but it’s a very different thing to actually see them used creatively in the wild. Developer Steven Wittens recently did just that when he redesigned his Acko.net website. Wittens turned to the 3-D features in CSS 3 — with a little JavaScript help — to create a visually stunning 3-D page header.

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.

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.

To work around some of CSS limitations in the browsers, Wittens turned to Three.js, a JavaScript 3-D engine written by Ricardo Cabello, better known as Mr. Doob. For those interested in the code behind some of the transformation happening on Acko.net, Wittens has promised to release it via GitHub in the near future.

Here’s The Thing With Ad Blockers

We get it: Ads aren’t what you’re here for. But ads help us keep the lights on. So, add us to your ad blocker’s whitelist or pay $1 per week for an ad-free version of WIRED. Either way, you are supporting our journalism. We’d really appreciate it.