CSS Perspective Card Flip

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:100px;position:fixed;top:0;right:0;bottom:0;left:0; }
        
    .scene {
      border: solid 1px #dedede;
			width: 800px;
      height: 560px;
      perspective: 600px;
    }
    
    .card {
      width: 100%;
      height: 100%;
      position: relative;
      transition: transform 2s, width 2s;
      transform-style: preserve-3d;
    }
    
    .card__face {
      position: absolute;
      height: 100%;
      width: 100%;
      backface-visibility: hidden;
    }
    
    .card__face:hover {
      cursor: pointer;
    }
    
    .card__face--front {
      background: red;
      width: 100%;
    }
    
    .card__face--back {
      background: blue;
      transform: rotateX(180deg);
      width: 50%;
    }
    
    .card.is-flipped {
      transform: rotateX(180deg);
    }
  </style>
</head>

<body>
  <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>
    var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});

</script>
</body>

https://d3js.org/d3.v4.min.js