jQuery to flip div 180 degrees

Question

Bascially trying to show a series of cards similar to playing cards or Tarot which each have a unique picture or image on one side and a text description on the other.

When page is loaded the image will show first off but on clicking a button the card will flip 180 degrees to show a text description of the card/image.

So therefore I guess it's a question of flipping the image in 3d while revealing the div behind. Looked at the Cycle plugin but not sure it is what is needed.

Anyone any ideas?

Answer 1

Use CSS3 for the rotation:

• In Mozilla Firefox this will be -moz-transform: rotate(180deg)
• In Webkit based browsers, i.e. Chrome: -webkit-transform: rotate(180deg)
• In Opera: -o-transform: rotate(180deg)
• In IE: -ms-transform: rotate(180deg) (only IE9)
• In pre-IE9: not easily possible, will need the use of Matrix Filter

Use jQuery rotate plugin to unify all the browser differences.

See fiddle: http://jsfiddle.net/garreh/bqYUA/