JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      1
    </div>
    <div class="back">
      2
    </div>
  </div>
</div>

CSS

.flip-container {
  perspective: 1000px;
}

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}

JavaScript

$(document).on("click", ".flip-container", function () {
	$(this).toggleClass('hover');
});