JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css">
<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>
    <div id="slider"></div>

CSS

#book {
    position:relative;
    width:200px;
    height:200px;
    margin:80px auto 30px;
    background:black;
    -webkit-perspective:800;
    -webkit-transform: rotateX(89deg); /*Rotate your book here*/
    -webkit-transform-style: preserve-3d;
    -webkit-perspective-origin: 0px 50%;
}
.side{
    position:absolute;
    top:0;
    left:0;
    -webkit-backface-visibility:hidden;
    -webkit-transform-style: preserve-3d;
}

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

.page {
    width:200px;
    height:200px;
    position:absolute;
    background:green;
    z-index:1;
}


.left {
    left:-200px;
    -webkit-transform-origin:100% 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;
}

#one .page{
  background:red;
}

JavaScript

var width = 200;
var openAngle = 90;
var closeAngle = 110;
var leftAngle = (180 - openAngle) / 2;
var rightAngle = -(180 - openAngle) / 2;


var distZ = width * Math.cos(degToRad(openAngle / 2)) - width * Math.cos(degToRad(closeAngle - 90));
var distX = width * Math.sin(degToRad(openAngle / 2)) - width * Math.sin(degToRad(closeAngle - 90));


var gradient = distZ / distX;

var ratio = openAngle / distX;

$('#one .left').css('-webkit-transform', 'rotateY(' + leftAngle + 'deg)');
$('#one .right').css('-webkit-transform', 'rotateY(' + rightAngle + 'deg)');

$('#two').css('-webkit-transform', 'translateX(' + distX + 'px) translateZ(' + distZ + 'px)')
$('#two .left').css('-webkit-transform', 'rotateY(' + closeAngle + 'deg)');
$('#two .right').css('-webkit-transform', 'rotateY(' + rightAngle + 'deg)');

$('#three').css('-webkit-transform', 'translateX(' + (distX * 2) + 'px) translateZ(' + pointY(distX * 2) + 'px)')
$('#three .left').css('-webkit-transform', 'rotateY(' + closeAngle + 'deg)');
$('#three .right').css('-webkit-transform', 'rotateY(' + rightAngle + 'deg)');

function turn(x) {
    var angle = ratio * x;
    $('#one').css('-webkit-transform', 'translateX(' + x + 'px) translateZ(' + pointY(x) + 'px)');
    //$('#one .right').css('-webkit-transform','rotateY('+(rightAngle+angle)+'deg)');
    $('#two').css('-webkit-transform', 'translateX(' + (distX + x) + 'px) translateZ(' + (-pointY(distX + x)) + 'px)');
    $('#three').css('-webkit-transform', 'translateX(' + (distX*2 + x) + 'px) translateZ(' + (-pointY(distX*2 + x)) + 'px)');
    //$('#two .left').css('-webkit-transform','rotateY('+(closeAngle+angle)+'deg)');
    var x1 = x;
    var y1 = pointY(x);
    var x2 = distX + x;
    var y2 = -pointY(distX + x);
    var distance = Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));
    var angle = radToDeg(Math.acos((Math.pow(distance, 2) - Math.pow(width, 2) * 2) / (-2 * Math.pow(width, 2))));

}

function pointY(x) {
    if (x < 0) {
        gradient *=...