<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<main>
<style>
.Shot
{
transform: perspective(1000px);
transform-style: preserve-3d;
width:500px;
height: 400px;
margin:20px auto 0 auto;
text-align:center;
transition: transform 1s;
}
.Shot[show="cover"]{ transform: perspective(1000px) rotateY(-70deg); }
.Shot[show="spine"]{ transform: perspective(1000px) rotateY(-10deg); }
.Shot[show="back" ]{ transform: perspective(1000px) rotateY(-235deg); }
.Shot[show="pages"]{ transform: perspective(1000px) rotateY(-180deg); }
.Book
{
height:100%;
transform-style: preserve-3d;
transform: translateZ(100px);
position: relative;
display:inline-block;
}
.Spine
{
display:flex;
justify-content:space-between;
margin:0 auto;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.Spine__Glue
{
flex:0;
width:0;
height:100%;
position:relative;
transform:rotateY(90deg);
transform-style: preserve-3d;
transition: transform 0.4s;
}
.Spine__Glue[swing='right']{transform: rotateY( 20deg );}
.Spine__Glue[swing='left' ]{transform: rotateY( 160deg );}
.Panel
{
height:100%;
top:0%;
float:left;
position:relative;
}
.Spine__Glue[swing='right'] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)}
.Spine__Glue[swing='left' ] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)}
.Panel.Page
{
height:98%;
top:1%;
}
.Panel img
{
display:block;
height:100%;
width:auto;
backface-visibility: hidden;
}
.Panel img:last-child
{
position:absolute;
top:0;
left:0;
transform: rotateY(180deg);
}
.Panel.Page::before, .Panel.Page::after
{
content:" ";
background-size: 100% 100%;
background-position: 0px 0px;
background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
backface-visibility: hidden;
}
.Panel::after
{
transform:rotateY(180deg) scaleX(-1);
}
.Shadow::after
{
transform: rotateX(90deg) translateY(-100px) translateZ(12px);
box-shadow: 0px 100px 60px black, 0px 100px 20px black;
display: block;
position: absolute;
top: 100%;
content: " ";
width: 100%;
height: 29px;
border-radius: 39px;
}
</style>
<div class="Shot">
<div class="Book">
<img style="display:block; height:100%; width:auto;" src="http://placekitten.com/20/200"/>
<div class="Spine Shadow">
<div class="Spine__Glue" swing="closed"><div class="Panel Cover Front Shadow"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="book-page-devo-1.JPG"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
<div class="Spine__Glue" swing="closed"><div class="Panel Cover Back Shadow"><img src="book-panel-cover.jpg"/><img src="book-panel-cover.jpg"/></div></div>
</div>
</div>
</div>
<div>
<button onclick="bookPose('cover'); bookClose();">Cover</button>
<button onclick="bookPose('spine'); bookClose();">Spine</button>
<button onclick="bookPose('back'); bookClose();">Back</button>
<button onclick="bookPose('pages'); bookOpen(3);">0</button>
<button onclick="bookPose('pages'); bookOpen(4);">1</button>
<button onclick="bookPose('pages'); bookOpen(5);">2</button>
<button onclick="bookPose('pages'); bookOpen(6);">3</button>
<button onclick="bookPose('pages'); bookOpen(7);">4</button>
</div>
</main>
<script>
let $ = query => Array.from(document.querySelectorAll(query));
let pages = $("[swing]");
let table = $(".Shot")[0];
let bookOpen = index =>
{
pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
};
let bookClose = () =>
{
pages.forEach(p=>p.setAttribute("swing", "closed"));
};
let bookPose = inPanel =>
{
table.setAttribute("show", inPanel);
bookClose();
};
</script>
</body>
</html>