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