155 lines
4.4 KiB
HTML
155 lines
4.4 KiB
HTML
<!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> |