.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 .front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: #333;*/
  transform-style: preserve-3d;
}

.flipBoxContainer .box .body .back {
  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 .back div {
  transform-style: preserve-3d;
  padding: 20px;
  /*background: linear-gradient(45deg, #FE0061,#FFEB3B);*/
  transform: translateZ(50px);
}

* {
  margin: 0;
  padding: 0;
  font-family: 'poppins',sans-serif;
}