查看演示

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');
    })
  })
})
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。