Pluginweb.Net

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.