O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required