panel.css

.panel {
  border-radius: 8px;
  margin: 0 auto;
  width: 320px;
  height: 400px;
  perspective: 600px;
  position: relative;
 }

.panel .panel-front {
  backface-visibility: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.4);
  height: 100%;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0);
  transition: all .4s ease-in-out;
  width: 100%;
}

.panel.flip .panel-front {
  transform: rotateY(179deg);
}

.panel .panel-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(-179deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .4s ease-in-out;
}
.panel.flip .panel-back {
  transform: rotateX(0) rotateY(0);
  box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}