Create a web animation like Flipboard dashboard image flip

Question

I'm trying to use Jquery/HTML/CSS to create an animation like Flipboard dashboard imageflip. See the demo here http://www.youtube.com/watch?v=w1fTI7oYfbI .

The person who implemented the above animation didn't post any codes.

Can anyone suggest something on this?

Thanks in advance.

Answer 1

You need CSS transform to create animations like this. A similar demo (with code) is found at: http://www.markandey.com/2011/12/flipboard-like-ui-on-iphone-safari.html

note, the example only uses the webkit prefix, make sure to use other prefixes too, to support multiple browsers. All about transform you can find at: http://www.w3schools.com/cssref/css3_pr_transform.asp

Hope you got enough to get you started now.