JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<div class="scene">
  <div id="myDiv" class="card">
    <div class="card__face card__face--front">First form</div>
    <div class="card__face card__face--back">Second form
  </div>
</div>
<button onclick="flip()">Flip</button>

CSS

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}
.card__face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}
.card__face--front {
  background: red;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg) rotateZ(180deg);
}
.card.is-flipped {
  transform: rotateX(180deg);
}
button {
  font-size: 2em;
}

JavaScript

function flip() {
  var myDiv = document.getElementById("myDiv");
  if(hasClass(myDiv, 'is-flipped')) {
    removeClass(myDiv, 'is-flipped');
  } else {
    addClass(myDiv, 'is-flipped');
  }
}

function hasClass(ele,cls) {
  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}