JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<div id="book">
<div id="one" class="side">
    <div class="pageWrapper">
        <div class="left page"></div>
        <div class="right page"></div>
    </div>
</div>
<div id="two" class="side">
    <div class="pageWrapper">
        <div class="left page"></div>
        <div class="right page"></div>
    </div>
</div>
<div id="three" class="side">
    <div class="pageWrapper">
        <div class="left page"></div>
        <div class="right page"></div>
    </div>
</div>
</div>

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

CSS

#book {
    position:relative;
    margin:100px;
    width:300px;
    height:100px;
    background:black;
}
.side{
    position:absolute;
    top:0;
    left:0;
    -webkit-perspective:800;
    -webkit-backface-visibilty:hidden;
}

.pageWrapper {
    position:relative;
    height:100px;
}

.page {
    width:100px;
    height:100px;
    position:absolute;
    background:#f2f2f2;
    z-index:1;
}


.left {
    left:-99px;
    -webkit-transform-origin:100px 0px;
    box-shadow:1px 0px 15px rgba(0,0,0,0.1) inset;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}

.right{
    -webkit-transform-origin:0px 0px;
    box-shadow:1px 0px 15px rgba(0,0,0,0.1) inset;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
}

JavaScript

var idNum = 0;
var activePage;
var sideArr = [];
var openingAngle = 60;
var sideAngle = (180 - openingAngle) / 2;
var closedAngle = 90 + 20; //Adjust 20 to close/widen the gap
var width = 100;
var dist = Math.sqrt(Math.pow(width, 2) + Math.pow(width, 2) - 2 * Math.pow(width, 2) * Math.cos(degToRad(180 - closedAngle - sideAngle)));

var additionalAngle = radToDeg(Math.asin((dist / 2) / width));
var activeAngle = openingAngle / 2 + additionalAngle;

var mousedownX;
var mdBool = false;
var direction;
var firstSide, secondSide;

function degToRad(angle) {
    return Math.PI / 180 * angle;
}

function radToDeg(rad) {
    return 180 / Math.PI * rad;
}

function Sides(page, activeStatus) {


    var eleLeft = page.find('.left');
    var eleRight = page.find('.right');
    var that = this;
    this.idNum = idNum;
    idNum++;
    this.page = page;
    this.active = activeStatus;

    this.leftAngle = (activeStatus) ? sideAngle : closedAngle;
    this.rightAngle = -sideAngle;

    this.turn = function() {
        that.openAngle = 180 - that.leftAngle + that.rightAngle;
        if (that.openAngle > activeAngle) {
            that.active = true;
            activePage = that.idNum;
        }
        else {
            that.active = false;
        }

        if (that.leftAngle < 60) {
            that.leftAngle = 60;
        }
        else if (that.leftAngle > 60 && that.openAngle > activeAngle && !mdBool) {
            that.leftAngle -= 1;
        }
        else if (that.leftAngle > 60 && that.openAngle < activeAngle && !mdBool) {
            that.leftAngle += 1;
        }

        if (that.leftAngle > 110) {
            that.leftAngle = 110;
        }


        if (that.rightAngle > -60) {
            that.rightAngle = -60;
        }
        else if (that.rightAngle < -60 && that.openAngle > activeAngle && !mdBool) {
            that.rightAngle += 1;
        }
        else if (that.rightAngle < -60 && that.openAngle < activeAngle && !mdBool) {
            that.rightAngle...