CSS3 CardFlip

fiddle.css

body {
    margin: 0; padding: 0; background: #eee; color: #444;
}
#container {
    width: 320px; height: 300px;
    background: #fff; margin: 20px auto; padding: 30px 0;
    -webkit-perspective: 600;
}
#card {
    width: 200px; height: 300px;
    margin: 0 auto;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1s;
}
.face {
    width: 200px; height: 300px;
    position: absolute;
    border-radius: 5px; box-shadow: 0 0 4px rgba(0,0,0,0.75);
    -webkit-backface-visibility: hidden;
}
#front { background: #eee; }
#back {
    background: #ddd;
    -webkit-transform: rotateY(180deg);
}
.flipped {
    -webkit-transform: rotateY(180deg);
}

fiddle.html

<div id="container">
    <div id="card" onclick="flip(this);">
        <div id="front" class="face">front</div>
        <div id="back" class="face">back</div>
    </div>
</div>

fiddle.js

function flip(el) {
    el.className = el.className == "flipped" ? "" : "flipped";
}

fiddle.manifest

name: CSS3 CardFlip
description: WebKit CSS3 3D Transforms Test 
authors:
  - Christian Fleschhut
resources:
  - http://some.url.com/some/file.js
  - http://other.url.com/other_filename.css
normalize_css: no

http://jsfiddle.net/gh/gist/jquery/1.6.2/1110484/