Card Battle! - HTML5 Game Development - page 55

<div class="card player b flipped out">
<div class="front face"></div>
<div class="back face"></div>
</div>
<div class="card player c flipped out">
<div class="front face"></div>
<div class="back face"></div>
</div>
</div>
Engage thrusters
Let's create the card-selecing logic by following the given steps:
1. We want to place the player's cards at the botom. We will use the absolute
posiion for that, as shown in the following code:
.card {
position: absolute;
bottom: -30px;
/* rest of .card styles here */
}
.card.a { left: 15px; }
.card.b { left: 170px; }
.card.c { left: 325px; }
.card.player.out {
transform: translate3d(0, 150%, 0);
}
.card.player.in {
transform: translate3d(0, 0, 0);
}
.card.player.flipped { /* indicate the card is clickable*/
cursor: pointer;
}
.card.player.in.flipped:hover { /* ensure only player,
flipped and the just in card get this hover event */
transform: translate3d(0, -10px, 0);
}
.card.selected {
bottom: 250px;
left: 300px;
}