div#container
  - var i = 0;
  while i < 3
    .card
      .front.face
      .back.face
    - i++;

$transitionTime: .35s;
$transitionEase: cubic-bezier(0.13, 1.03, 0.39, 0.98);
$tiltAngle: 20deg;

body, html, #container{width: 100%; height: 100%; margin: 0; padding: 0;}

#container{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-image: linear-gradient(to bottom right,  #52c234, #061700 120%);;
}

.card{
  width: 21vw;
  height: 30.47vw;
  perspective: 100vw;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  position: relative;
  &:nth-child(1) .front{background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7b/Jack_of_clubs2.svg');}
  &:nth-child(2) .front{background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/f6/Queen_of_hearts2.svg');}
  &:nth-child(3) .front{background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/22/King_of_spades2.svg');}

  .face{
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform $transitionTime $transitionEase, 
                box-shadow $transitionTime $transitionEase, 
                border-width $transitionTime $transitionEase;
    box-shadow: 0px 1.2vw 4vw -1vw rgba(0, 0, 0, 0.6);
    background-position: 0 0;
    background-size: 21vw;
    background-repeat: no-repeat;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 1.1vw;
  }
  .front{
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/22/King_of_spades2.svg');
    transform: rotateX(0deg);
  }
  .back{
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_back_01.svg');
    transform: rotateX(180deg);
  }
  &:hover, &.hover{
    .front{
      transform: rotateX($tiltAngle);
      box-shadow: 0px 10vw 9vw -6vw rgba(0, 0, 0, 0.5);
      border-bottom: 1px solid rgba(255,255,255,0.8);
      border-top: 1px solid rgba(0,0,0,0.8);
    }
    .back{
      transform: rotateX(180deg + $tiltAngle);
      box-shadow: 0px -2vw 4vw -2vw rgba(35, 2, 2, 0.68), inset 0px -8vw 12vw -5vw rgba(0,0,0,0.3);
      border-top: 1px solid rgba(255,255,255,0.8);
      border-bottom: 1px solid rgba(0,0,0,0.8);
    }
  }
  &.flipped{
    .front{transform: rotateX(180deg);}
    .back{transform: rotateX(360deg);}
    &:hover, &.hover{
      .front{transform: rotateX(180deg + $tiltAngle);}
      .back{transform: rotateX(360deg - $tiltAngle);}
    }
  }
}

document.addEventListener('DOMContentLoaded', function () {
  [].forEach.call(document.querySelectorAll(".card"), function(card, i, cards){
    card.addEventListener("click", function(e){
      e.currentTarget.classList.toggle("flipped");
    });
  });
});