.card-wrapper {
  display: inline-block;
  perspective: 1000px;
}
.card-wrapper .card {
  position: relative;
  /*cursor: pointer;*/
  transition-duration: 0.6s;
  transition-timing-function: ease-in-out;
  transform-style: preserve-3d;
}
.card-wrapper .card .front,
.card-wrapper .card .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}
.card-wrapper .card .front {
  z-index: 2;
}
.card-wrapper .card .back,
.card-wrapper.flip-right .card .back {
  transform: rotateY(180deg);
}
.card-wrapper:hover .card,
.card-wrapper.flip-right:hover .card {
  transform: rotateY(180deg);
}
.card-wrapper.flip-left .card .back {
  transform: rotateY(-180deg);
}
.card-wrapper.flip-left:hover .card {
  transform: rotateY(-180deg);
}
.card-wrapper.flip-up .card .back {
  transform: rotateX(180deg);
}
.card-wrapper.flip-up:hover .card {
  transform: rotateX(180deg);
}
.card-wrapper.flip-down .card .back {
  transform: rotateX(-180deg);
}
.card-wrapper.flip-down:hover .card {
  transform: rotateX(-180deg);
}
.card-wrapper.flip-diagonal-right .card .back {
  transform: rotate3d(1, 1, 0, 180deg);
}
.card-wrapper.flip-diagonal-right:hover .card {
  transform: rotate3d(1, 1, 0, 180deg);
}
.card-wrapper.flip-diagonal-left .card .back {
  transform: rotate3d(1, 1, 0, -180deg);
}
.card-wrapper.flip-diagonal-left:hover .card {
  transform: rotate3d(1, 1, 0, -180deg);
}
.card-wrapper.flip-inverted-diagonal-right .card .back {
  transform: rotate3d(-1, 1, 0, 180deg);
}
.card-wrapper.flip-inverted-diagonal-right:hover .card {
  transform: rotate3d(-1, 1, 0, 180deg);
}
.card-wrapper.flip-inverted-diagonal-left .card .back {
  transform: rotate3d(1, -1, 0, 180deg);
}
.card-wrapper.flip-inverted-diagonal-left:hover .card {
  transform: rotate3d(1, -1, 0, 180deg);
}