Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipe across the screen to move the images or tap on any image individually to move it. The app works fine in iPhones, iPod touch and iPad’s. Have not tested it in Android 4.0 or greater. Since iOS browsers supports CSS3 3D transformations so it runs very smooth. In Androids < 4.0 it gives a horrible look n feel. Here’s the link to the demo. Check in an iOS device (open up in mobile safari), Link: http://rialab.jbk404.site50.net/coverflowtouch/ For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/

1. CSS3 Coverflow animation for iOS – Adding Touch gestures
Actual Blog post link: http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-
touch-gestures/
Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipe
across the screen to move the images or tap on any image individually to move it. The app works fine in iPhones,
iPod touch and iPad’s. Have not tested it in Android 4.0 or greater. Since iOS browsers supports CSS3 3D
transformations so it runs very smooth. In Androids < 4.0 it gives a horrible look n feel.
Here’s the link to the demo. Check in an iOS device (open up in mobile safari),
Link: http://rialab.jbk404.site50.net/coverflowtouch/
and if you are looking for a desktop version of the Coverflow, you can check my previous post.
This is how it looks on an iPod touch
I am still completing the descriptive write up and compiling some images so that the demo is explained properly.
However, I have added comments to the code in the current demo so that you will get at least some idea of what I am
trying to do. All in all there are three files,
1) index.html
2) style.css
3) script.js

2. and there is also an images folder which has the images of the superheroes. I also have a download link at the
bottom of the post.
Some features are,
1) Touch enabled. Use your finger to control. It is a single touch app.
2) Smooth movements because of CSS3 Transitions and Transformations.
3) CSS3 Reflections.
4) Very lightweight, its all custom javascript, css, html. No external libraries. No JQuery..
Some of the failures are,
1) I have only supported portrait mode. This doesn’t mean that the coverflow stops working in landscape mode. Its
just that the images does not position them accordingly as per the device screen. So 320 x 416 is what I have
considered as my boundary for now. If you are checking this in an iPad, the images will still be smaller. You have to
work on it a little to make it of iPad size.
2) There are still 7 images as the desktop version (I have not really got much time to make it more dynamic). You can
always build on top of this.
3) There are hardcoded co-ordinate values. Again, I haven’t really sat down and tried to clean this up into a more
robust and dynamic app. I will try it definitely.