css3翻牌效果

查看演示

HTML：

  <section id="game">
  <div id="cards">
    <div class="card">
      <div class="face front">AK正面</div>
      <div class="face back cardAK">背面</div>
    </div>
    <div class="card">
      <div class="face front">AQ正面</div>
      <div class="face back cardAQ">背面</div>
    </div>
  </div>
</section>

CSS:

#game{background:#9c9; padding:5px;}
.card{width: 80px; height: 120px; position: relative; line-height: 120px; text-align: center; -webkit-perspective:600; margin-bottom: 10px;}
.face{border-radius: 10px; width: 100%; height: 100%; position: absolute; -webkit-transition:all .3s; -webkit-backface-visibility:hidden;}
.front{background: #966; z-index: 10;}
.back{background: #eaa; -webkit-transform: rotate3d(0,1,0,-180deg);}
.card-flipped .front{-webkit-transform:rotate3d(0,1,0,180deg); z-index: 8;}
.card-flipped .back{-webkit-transform:rotate3d(0,1,0,0deg); z-index: 10;}

JS:

$(function(){
  $('#cards').children().each(function(index){
    $(this).click(function(){
      $(this).toggleClass('card-flipped');
    })
  })
})