Coverflow animation using CSS3 3D Transformations – Part1

Update
1) Coverflow for iOS with touch gestures: Sneak Peak at the touch gesture enabled Coverflow for mobiles(iOS) is ready. Have a look at it here. There is a demo and download link.

Back to the actual post:
Recently I worked on the famous Coverflow animation using CSS3 3D Transformations, and I must tell you that the results were very impressive. I was actually working on a mobile web version of the Coverflow animation meant for iPhone,iPod, Ipad. Well, I am still working on it and finishing on adding touch gestures to the animation.

Disappointingly, Android device’s web-kit browser does not support CSS3 3D animations as of now so the coverflow that I am trying to build is not working on Android devices. However, I read it somewhere that the next version-Android 3.0 will have support for it. So till then I could support only iOS device’s web-kit browser.

In this post I am presenting a desktop version of the Coverflow (no touch gestures). Right now it runs only in Safari. I must tell you once again that the app I built is mainly meant for web-kit browsers (since iPhone’s and Android’s run web-kit browsers). I have the link to the demo app below,

Demo: http://jbk404.site50.net/css3/coverflow/ (See in Chrome or Safari for best results)

Click to see demo

The demo has only 7 images as of now and the code has pre-defined values in it but it is fully functional. I am working on making it more dynamic so that any number of images can be used. I am finishing up on some nuances of the app and refining the code further, and till then I am posting only the demo. I will talk about the code in details later (very soon). Also I will come up with a part2 of this tutorial series where I will talk about the mobile version with touch gestures.

For the full code you can view the source of the demo.

Here are some of the features of the desktop version of the demo,

  • Click on any image to bring it to the center.
  • Use the previous and next button to see other images.
  • Image Reflections using CSS3 reflections.
  • CSS3 3D Transforms as I have already mentioned. This gives 3D look and feel.
  • Smooth movement of images using CSS3 Transitions.
  • No third party library or plugins. I have used pure CSS3 and JavaScript.

You can use the code and build on top of that.

15 thoughts on “Coverflow animation using CSS3 3D Transformations – Part1

  1. Hi Joseph,

    Thanks for the great article. Did you get any anywhere with the touch gestures? I’m looking for exactly what you have done but with the ability to use your finger to slide left and right.

    Thanks, Tom

  2. This is the perfect website for anyone who wishes to understand this topic. You realize a whole lot its almost tough to argue with you (not that I actually would want to…HaHa). You definitely put a new spin on a subject that has been written about for a long time. Wonderful stuff, just great!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s