HTML5 Game Development by Example(Second Edition)

Time for action – flipping a card with CSS3

We are going to start a new project and create a card-flipping effect when we click on the playing card:

1. Let's continue with our previous code example.
2. The card now contains two faces: a front face and a back face. Replace the following code in the body tag in the HTML code:

   <section id="game">
     <div id="cards">
       <div class="card">
         <div class="face front"></div>
         <div class="face back cardAK"></div>
       </div> <!-- .card -->
       <div class="card">
         <div class="face front"></div>
         <div class="face back cardAQ"></div>
       </div> <!-- .card -->
     </div> <!-- #cards -->
   </section> <!-- #game -->
   <script src="js/jquery-2.1.3.min.js"></script>

3. Then, create a new css3flip.css file in the css folder to test the flipping effect.
4. In ...