CSS3 CardFlip

WebKit CSS3 3D Transforms Test author(s): Christian Fleschhut

HTML

<script src="http://some.url.com/some/file.js"></script>
<link rel="stylesheet" href="http://other.url.com/other_filename.css">
<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>

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);
}

JavaScript

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