Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a 3D card-flipping effect


In this task, we will take a look at how to create a 3D card-flipping effect. This effect will be used in our playing card element.

Prepare for lift off

We will need to prepare card graphics for this task. They are front-face.png and back-face-pattern.png.

Engage thrusters

We will start by defining the game elements in HTML, as we have done in the previous section:

  1. Inside #game-scene, we create two card elements with front and back faces:

    <div id="game-scene" class="scene out">
      <div class="card a">
        <div class="front face"></div>
        <div class="back face"></div>
      </div>
      <div class="card b flipped">
        <div class="front face"></div>
        <div class="back face"></div>
      </div>
    </div>
  2. The core part in this section is the CSS styling. In the game.css file, we append the following styling to the card container for its front and back faces, flipped state, and the in-between...