5 #CardFlip CardFlip

Displays a card flip.

Use JavaScript to toggle the is-flipped class in order to flip the card.

Note: IE doest not support transform-style: preserve-3d, so we turn off animation on IE.

Example

front

back

Markup

<div class="scene">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<script type="text/javascript">
  var cards = document.querySelectorAll('.card');
  Array.prototype.forEach.call(cards, function(card) {
    card.addEventListener('click', function (event) {
      card.classList.toggle('is-flipped');
    });
  });
</script>

Source: cardflip.css, line 1