polycardwar-components-card-flip.css

.game-card {
  position: relative;
  transition: transform .5s linear 0s;
  backface-visibility: hidden;
}

.game-card .front {
  transform: rotateY( 180deg);
  position: absolute;
}

.game-card.front.flipped {
  transform: rotateY( 0deg);
}

.game-card .back {
  transform: rotateY( 0deg);
}

.game-card.back.flipped {
  transform: rotateY( -180deg);
}

polycardwar-components-card-flip.html

<div class="game-card">
  <div id="cardFront" class$="front {{isFlipped(show)}}" style$="width: {{cardWidth}}px; height: {{cardHeight}}px" on-click="flip">
    <div class="rank left">{{rank}}</div>
    <div class="rank right">{{rank}}</div>
  </div>
  <div id="cardBack" class$="back {{isFlipped(show)}}" style$="width: {{cardWidth}}px; height: {{cardHeight}}px" on-click="flip"></div>
</div>