JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <div id="left" class="page">
        <div class="stand"></div>
        <div class="floor"></div>
    </div>
    <div id="right" class="page">
        <div class="stand"></div>
        <div class="floor"></div>
    </div>
</div>

<input type="button" value="click">

CSS

#box {
    position:relative;
    width:200px;
    height:200px;
    -webkit-perspective:1200;
    -webkit-transform:rotateX(-10deg);
    -webkit-transform-style: preserve-3d;
}

.page{
    position:absolute;
    top:50px;
    -webkit-backface-visibility:hidden;
    -webkit-transform-style: preserve-3d;
    width:100px;
    height:100px;
}

#left {
    left:20px;
}

#right {
    left:120px;
    -webkit-transition:1s linear;
    -webkit-transform-origin: 0px 100px;
}

.floor {
    width:100%;
    height:100%;
    -webkit-transform:rotateX(-90deg);
    -webkit-transform-origin: 0px 100px;
}

#left .floor {
    background:red;
}

#right .floor {
    background:green;
}

.stand {
    width:50px;
    height:50px;
    position:absolute;
    bottom:0;
    -webkit-transition:1s linear;
     
}

#left .stand{
    background:blue;
    -webkit-transform:translateZ(50px) translateX(100%) rotateY(-10deg) rotateX(0deg);
    -webkit-transform-origin: 0px 50px;
}

#right .stand{
    background:grey;
    -webkit-transform:translateZ(50px) rotateY(10deg) rotateX(0deg);
    -webkit-transform-origin: 50px 50px;
}

.turnRightPage {
    -webkit-transform:rotateZ(-45deg) !important;
}

.leftStandFall {
    -webkit-transform:translateZ(50px) translateX(100%) rotateY(-10deg) rotateX(-30deg) !important;
}

.rightStandFall {
    -webkit-transform:translateZ(50px) rotateY(10deg) rotateX(-30deg) !important;
}

JavaScript

$('input').click(function(){
    $('#right').toggleClass('turnRightPage');
    $('#left .stand').toggleClass('leftStandFall');
    $('#right .stand').toggleClass('rightStandFall');
})