body{
  background-color: #000000;
}
.card {
  transform-style: preserve-3d;
  width: 20vw;
  height: 30vw;
  margin-bottom: -30vw;
  margin-left: 0vw;
  perspective: 100vw;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  animation-iteration-count: infinite;
  animation-name: spin;
  animation-duration: 0.8s;
  animation-timing-function: linear;
  transform-style: preserve-3d;
}
.card img{
  width: 100%;
  height: 100%;
  margin-bottom: -30vw;
  backface-visibility: hidden;
}
.card a{
  overflow: visible;
}
.tarot_face{
  z-index: -1;
  transform: scaleX(-1);
}
.backface{
  z-index: 1;
  transform: scaleX(1);
}
#card1{
  margin-left: 10vw;
}
#card2{
  margin-left: 40vw;
}
#card3{
  margin-left: 70vw;
}
@keyframes spin {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}