Rotate along Z- axis in HTML5 - Flip card

Question

Hi All,

I just came across a simple flash animation on flip card
The Playing Card Effect
The card has 2 images "front" image and "back" image,
when clicked the card toggles with rotating along Z axis
showing the front and back face accordingly.

Can the same effect be achieved using HTML5 / Canvas / CSS3 ??

PS: I'm complete newbie/noob when it comes to HTML5 and CSS3 stuff.

Thanks all

Answer 1

It's possible using CSS3 with Javascript

When rotation makes it so the card shows its backside, switch the graphic to the "back side" graphic. Otherwise, set the image src to the front side graphic.

You can also skew with the html5 canvas context using setTransform. Or you could take the slow route and manipulate pixel data manually.

Answer 2

This isn't a answer, but I saw what I believe you're talking about implementing done after submitting the form featured here: http://sublimevideo.net/

A lot of their CSS and JS is obfuscated, but from what I can glean it looks like they're using webkit transforms via a JS class switch. It's very fluid and actually surprised me by how stunning it looked. Hopefully some of the source can help you out.