css3 3d翻牌效果
css3动画3d翻牌效果，请用firefox和chrome查看示例
<html>
<head>
<title>css3 3d翻牌效果</title>
<style type="text/css">
.kuang{height: 300px;width: 200px;border: 2px solid black;position:relative}
.poker{height: 300px;width: 200px;background-color: #00ffff;position: absolute;left: 0px;top: 0px;
-webkit-transition:all 1s linear;
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-moz-transition:all 1s linear;
-moz-transform-style:preserve-3d;
-moz-backface-visibility:hidden;}
.pokerback{background-color: #c0c0c0;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);}
</style>
</head>
<body>
<div class="kuang" onclick="flip()">
<div class="poker" id="frontdiv">正面</div>
<div class="poker pokerback" id="backdiv">反面</div>
</div>
</body>
<script type="text/javascript">
var n = 1;
function flip() {
var frontdiv = document.getElementById('frontdiv');
var backdiv = document.getElementById('backdiv');
if (n == 1) {
frontdiv.style.WebkitTransform = "perspective(700) rotateY(-180deg)";
backdiv.style.WebkitTransform = "perspective(700) rotateY(-0deg)";
frontdiv.style.MozTransform = "perspective(700) rotateY(-180deg)";
backdiv.style.MozTransform = "perspective(700) rotateY(-0deg)";
n = 0;
} else {
frontdiv.style.WebkitTransform = "perspective(700) rotateY(0deg)";
backdiv.style.WebkitTransform = "perspective(700) rotateY(180deg)";
frontdiv.style.MozTransform = "perspective(700) rotateY(0deg)";
backdiv.style.MozTransform = "perspective(700) rotateY(180deg)";
n = 1;
}
}
</script>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：css3 3d翻牌效果