CSS3 实现游戏王卡片翻转效果
点击卡片之后，卡片会有一个慢慢翻开的渐变效果。
代码实现
<!DOCTYPE HTML><html><head><meta charset=utf-8><link rel="stylesheet" href="css/cardflip.css"></link><title>CSS3实现游戏王卡片翻转效果</title></head><body><section id="game"><div id="cards"><div class="card"><div class="face front"></div><div class="face back cardAK"></div></div></div></section><script src="js/jquery-1.6.min.js"></script><script>$(function(){$("#cards").children().each(function(index){// listen the click event on each card DIV element.$(this).click(function() {// add the class "card-flipped".// the browser will animate the styles between current state and card-flipped state.$(this).toggleClass("card-flipped");});});});</script></body></html>
cardflip.css
body{background: url(../images/bg.png);}.card{-webkit-perspective:600;width:80px;height:120px;margin:8px;}.face{border-radius:10px;width:100%;height:100%;position:absolute;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-backface-visibility:hidden;}.front{background: url(../images/card_bg.png);z-index:10;}.back{-moz-transform:rotate3d(0,1,0,-180deg);-webkit-transform:rotate3d(0,1,0,-180deg);transform:rotate3d(0,1,0,-180deg);z-index:8;}.card-flipped .front{-moz-transform:rotate3d(0,1,0,180deg);-webkit-transform:rotate3d(0,1,0,180deg);transform:rotate3d(0,1,0,180deg);z-index:8;}.card-flipped .back{-moz-transform:rotate3d(0,1,0,0deg);-webkit-transform:rotate3d(0,1,0,0deg);transform:rotate3d(0,1,0,0deg);z-index:10;}.cardAK{background:url(../images/AK.png);}值得注意的地方
鼠标点击事件的检测和处理
使用了jquery的toggleClass函数
通过调整z-index来控制卡片的正面与背面的显示。