<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
figure
{
width:500px;
height:500px;
transform: perspective(400px);
transform-style: preserve-3d;
}
.Sheet
{
display:block;
width:120px;
height:200px;
border:2px solid black;
position:relative;
transform:rotateY(45deg);
transform-style: preserve-3d;
transform-origin: left center;
}
.Sheet img
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
backface-visibility: hidden;
}
.Sheet img:last-child
{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<main>
<style>
.Book
{
transform: perspective(400px);
transform-style: preserve-3d;
}
.Spine
{
display:flex;
justify-content:space-between;
width:50px;
height:200px;
margin:0 auto;
}
.Spine__Glue
{
flex:0;
width:1px;
height:100%;
border:1px solid blue;
position:relative;
transform:rotateY(0deg);
transform-style: preserve-3d;
}
.Panel
{
height:100%;
top:0%;
float:left;
position:relative;
}
.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::before, .Panel::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);
}
</style>
<div class="Book">
<div class="Spine">
<div class="Spine__Glue"><div class="Panel Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
<div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
<div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
<div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
<div class="Spine__Glue"><div class="Panel Cover Back"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
</div>
</div>
<div style="float:left; width:20px; height:200px; border:1px solid blue;">
<div style="float:left;">
<img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/>
</div>
</div>
<div style="float:left; width:20px; height:200px; border:1px solid blue;">
<div style="float:left;">
<img style="height:100%; width:auto;" src="http://placekitten.com/120/200"/>
</div>
</div>
<div style="clear:left;"></div>
<figure>
<div class="Sheet"><img src=" http://placekitten.com/120/200" alt="cover front"/>
<img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
<div class="Sheet"><img src=" http://placekitten.com/120/200" alt="cover front"/>
<img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
<div class="Sheet"><img src=" http://placekitten.com/120/200" alt="cover front"/>
<img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
<div class="Sheet"><img src=" http://placekitten.com/120/200" alt="cover front"/>
<img src="http://via.placeholder.com/120x200" alt="cover back "/></div>
</figure>
</main>
<script>
</script>
</body>
</html>