CoverFlow in Mobile Safari
Posted by marshall Mon, 17 Nov 2008 04:06:00 GMT
When I first heard, several months ago, that iPhone OS 2.0 supported hardware-accelerated 3D CSS transforms in WebKit, my first thought was, "CoverFlow could be implemented in Safari with this!" In fact, I fully expected such an implementation to arrive within weeks. Well, months went by, and no one actually wrote such a thing that I could find, so a couple of weeks ago I decided that I ought to.
Last weekend I actually sat down to write it, but first made one more cursory check to see if I'd missed anything. It turned out that, in the previous week, Charles Ying had posted his own work on implementing CoverFlow using 3D CSS transforms, and had even set up a CSS-VFX project on Google Code for continuing work on it.
The CSS-VFX example demonstrates touch events, canvas (for reflections), CSS animation, and rotating images in 3D space, using sample images from Flickr. It's well worth looking at if you're doing any work on iPhone-optimized web sites. And although 3D transforms are currently only available on iPhone OS, they will no doubt make it to WebKit on other platforms in the future, and perhaps even on other browser engines if the extensions make it into an official CSS spec someday.
It's also worth noting that the WebKit team has already implemented a -webkit-box-reflect style in the nightlies, though it hasn't yet made it to iPhone OS. When it does, the canvas code won't even be necessary; the iPhone will be able to do hardware-accelerated reflections in CSS.
