Flipping around a div using Javascript

Question

Flip is a great JQuery plugin for flipping blocks, but it doesn't preserve the background while it animates the flip.

For example, I have this pretty background here, before I flip. While flipping, it gets ugly.

Is there a way I can flip this div nicely, keeping the pretty background I have, and maybe even achieve a smoother animation than I can get with Flip?

If I need to dive into this headfirst and code my own function for flipping a div, that's also doable, and I'd really appreciate some pointer there, if that's what I must do.

Thanks so much!

Answer 1

Try the jQuery QuickFlip pulgin, this one seems pretty neat with handling the background.

Answer 2

Try looking into momoflow, its a coverflow type of application that animates the background to different angles.

It's using the canvas tag however, which could be an issue for you if you want IE compatibility. However the technique the dev is using is to chop the the image into several vertical slices and animate their position. You could extend this functionality to introduce a full flip!

Answer 3

A really cool way to do this is use CSS 3 transformations. It's much better than using a script; you should always avoid using scripts where simpler methods can be employed.