File Under: CSS

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.

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.

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.