.flipBoxContainer {
  transform-style: preserve-3d;
}

.flipBoxContainer .box {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px;
  transform-style: preserve-3d;
  perspective: 1000px;
  cursor: pointer;
}

.flipBoxContainer .box .body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 0.9s ease;
}

.flipBoxContainer .box .body .imgContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.flipBoxContainer .box .body .imgContainer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flipBoxContainer .box .body .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}

.flipBoxContainer .box:hover .body {
  transform: rotateY(180deg);
}

.flipBoxContainer .box .body .content div {
  transform-style: preserve-3d;
  padding: 20px;
  background: linear-gradient(45deg, #FE0061,#FFEB3B);
  transform: translateZ(100px);
}

.flipBoxContainer .box .body .content div h3 {
  letter-spacing: 1px;
}