body {
  background: #DDD;
  font-size: 14px;
  margin: 0;
  height: 100vh;
}
#grid {
  display: flex;
  width: 432px;
  margin: 0 auto;
  flex-wrap: wrap;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.container {
  width: 50px;
  height: 50px;
  position: relative;
  perspective: 80px;
  margin: 2px;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 300ms ease-out;
  pointer-events: none;
}
.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card .front {
  background: #2D99B2;
}
.card .back {
  background: #245966;
  transform: rotateY(180deg);
  will-change: transform;
}