Monday, June 2nd, 2008

Using CSS transforms to Build a Coverflow Effect

Category: WebKit

Webkit’s new CSS transforms are hot and developers are really starting to take notice. The ability to rotate and scale DOM elements via CSS has gotten people thinking about new possibilities. LifeRay’s Paul Bakaus has been experimenting with the new feature and was able to create a cool iTunes-like coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

This handy nifty new css feature allows you to do all kinds of 2d transformations on any element on the page, by utilizing custom CSS tags. This means you can rotate and translate DOM elements, but you can also use a generic matrix function to do whatever you want.

So here is where it get’s interesting. The fun thing about CSS Transforms is that they work today, in Safari 3.1, and on the iPhone, not only in one of the nightly builds, so it’s possible to target real-world users.

Paul used jQuery UI to create the actual coverflow widget and jQuery UI’s slider to be able to slide through. You can also navigate through the items by clicking on them or using the left/right keys on your keyboard.

You will need Safari 3.1 or Webkit to see this in action as CSS Transforms is currently limited to the Webkit browser platform.

Posted by Rey Bango at 7:47 am

3.5 rating from 41 votes


Comments feed TrackBack URI

Can’t wait for the new webkit-based epiphany release. Right now I have no way of testing any of these new transformation features.

Comment by urandom — June 2, 2008

Pretty shiny, pity it’s not available anywhere else. The “degraded” (non-Safari-3.x) behaviour isn’t too bad either, though!

Comment by Schill — June 2, 2008

@Urandom: – A simple cross-platform (Win/Lin/Mac) QT-based WebKit browser. It’s not feature-full, but is a pretty complete implementation of webkit.

Comment by matanlurey — June 2, 2008

i prefer this:

Comment by mrxrsd — June 4, 2008

Leave a comment

You must be logged in to post a comment.