We have gong through some CSS basic techniques. Let's make a game with the techniques. We are going to make a card game. The card game makes use of transform to flip the card, transition to move the card, JavaScript to hold the logic, and a new HTML5 feature called custom data attribute. Don't worry, we will discuss each component step by step.
In the card-flipping example, we were using two different playing card graphics. Now we prepare the whole deck of playing card graphics. Although we only use six playing cards in the matching game, we prepare the whole deck so we can reuse these graphics in other playing card games that we may create.
There are 52 playing cards in a deck and we have one more graphic for the backside. Instead of using 53 separated files, it is good practice to put separated graphics into one big sprite sheet file. The term sprite sheet was from an old computer graphics technique that...