JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="tilt">tilt</input>
<input type="button" id="rotate" value="rotate"></input>
<div id="tilter">
<div id="base">
    <div class="raiser">---
    <div class="face1">FACE UP
    <div class="face2">side</div></div></div>
</div>
</div>

CSS

div {
    -webkit-transform-style: preserve-3d;
}

#base {
    margin-left: 10%;
    width: 40%;
    height: 50%;
    font-size: 40px;
    -webkit-transition: 10s;
    background-color: rgba(128, 128, 128, 0.21);
}

.rotated {
    -webkit-transform: rotateY(90deg);
}

.raiser {
    -webkit-transform: rotateY(85deg);
    -webkit-transform-origin-x: 0%;
    position: absolute;
    width: 50%;
}
.face1 {
    background-color: lightblue;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin-x: 0%;
    position: absolute;
    width: 200%;
    left: 100%;
    top: 0px;
}

.face2 {
    background-color: lightgreen;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin-x: 0%;
    left: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
}

#tilter {
    -webkit-transition: 1s;
}

#tilt:checked ~ #tilter {
    -webkit-transform: rotateX(90deg);
}

JavaScript

$("#rotate").click(function(){
  var obj = $("#base");
  if (obj.hasClass("rotated")) {
      obj.removeClass("rotated");
  } else {
     obj.addClass("rotated");
  }
});