JSFiddle - React, Tailwind, and code Playground
HTML
<div class="view">
<div id="start" class="show-front">
<div class="face front">
<div id="one">
<button>Next</button>
</div>
</div>
<div class="face east">
<div id="two">
<button>Back</button>
</div>
</div>
</div>
</div>
CSS
.view{
position: relative;
height: 500px;
width: 500px;
background: transparent;
-webkit-perspective: 100000px;
}
.face {
position: absolute;
height: 500px;
width: 500px;
box-sizing: border-box;
border: 2px solid black;
background: green;
}
.east {
-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 250px);
transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 250px);
}
#one, #two {
height: 100%;
width: 100%;
}
#start {
-webkit-transition: all 0.6s cubic-bezier(0.14, 0.65, 0.88, 1.04);
transition: all 0.6s cubic-bezier(0.14, 0.65, 0.88, 1.04);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.show-front{
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
.show-right {
-webkit-transform: rotate3d(0, 1, 0, -89.9deg);
transform: rotate3d(0, 1, 0, -89.9deg);
}
JavaScript
var flipperino = false
$("#whyunowork, #one, #two").on("click", function(){
if (flipperino === false) {
$("#start").addClass('show-right').removeClass('show-front')
flipperino = true;
}
else {
$("#start").removeClass('show-right').removeClass('show-right2').addClass('show-front')
flipperino = false;
}
}.bind(this));
$("#whyunowork2").on("click", function(){
if (flipperino === false) {
$("#start").addClass('show-right2').removeClass('show-front')
flipperino = true;
}
else {
$("#start").removeClass('show-right2').removeClass('show-right').addClass('show-front')
flipperino = false;
}
}.bind(this));