O'Reilly logo

HTML5 Game Development HOTSHOT 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

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

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