Flipping cards

by labanino

HTML

<ul class="card-container">
  <li class="card">
    <div class="side-a">1</div>
    <div class="side-b">2</div>
  </li>
  <li class="card">
    <div class="side-a">3</div>
    <div class="side-b">4</div>
  </li>
  <li class="card">
    <div class="side-a">5</div>
    <div class="side-b">6</div>
  </li>
</ul>

CSS

body {
  font-family: 'Arial';
  font-weight: 900;
  color: #fff;
}

.card-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.card {
  width: 150px;
  height: 150px;
  line-height: 140px;
  font-size: 4em;
  text-align: center;
  perspective: 500px;
  margin: 5px;
}

.card .side-a {
  background-color: red;
}

.card .side-b {
  background-color: green;
}

.card .side-a,
.card .side-b {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  perspective: 150px;
  transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 5px;
}

.card .side-a:not(.showing) {
  z-index: 5;
  transform: rotateX(180deg) translateZ(20px);
}

.card .side-b:not(.showing) {
  z-index: 5;
  transform: rotateX(-180deg) translateZ(20px);
}

JavaScript

$('.side-a').addClass('showing');

// Animation
var animate = function(card) {
  $(card).children().toggleClass('showing');
}

var counter = 0;

// Random flip
var flipRandom = function() {
  var avail = $('.card:not(.animating)');
  // size() is a method, length is a property
  var r = Math.floor(Math.random() * avail.size());
  var target = $(avail[r]);
  animate(target, counter++);
}

setInterval(flipRandom, 2000);