使用css3进行简单的卡片翻转
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<script src="jquery.js"></script>
<title></title>
<style>
body{background:#e5e5e5;}
.card{-webkit-perspective:300;width:80px;height:120px;margin:8px;position:relative}
.face{border-radius:10px;width:100%;height:100%;position:absolute;
-webkit-transition:all 0.4s;-webkit-backface-visibility:hidden;
}
.front{background: blue;z-index:10;}
.back{-webkit-transform:rotate3d(1,0,0,-180deg);z-index:8;}
.card-flipped .front{-webkit-transform:rotate3d(1,0,0,180deg);z-index:8;}
.card-flipped .back{-webkit-transform:rotate3d(1,0,0,0deg);z-index:10;}
.cardAK{background:red;}
</style>
</head>
<body>
<div class="card">
<div class="face front">abbbdd</div>
<div class="face back cardAK">31654</div>
</div>
<script>
$(function(){
$('.card').hover(function() {
$(this).toggleClass("card-flipped");
});
});
</script>
</body>
</html>
参考地址：http://blog.csdn.net/foreverkoking/article/details/11391203
