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.
We will need to prepare card graphics for this task. They are front-face.png
and back-face-pattern.png
.
We will start by defining the game elements in HTML, as we have done in the previous section:
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>
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...