In this tutorial, you will learn how to create a 3D closed book with CSS. Watch the video below for a detailed tutorial.
<body>
<div class="book">
<img src="/cover.webp"/>
</div>
</body>body {
background-color: #2E3537;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.book {
width: 300px;
height: 370px;
position: relative;
box-shadow: -23px 27px 5px -5px rgb(0, 0, 0, 0.8);
transform: perspective(960px) rotateX(50deg) rotateZ(-30deg) skewY(-5deg);
}
.book img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.book:before {
content: '';
position: absolute;
top: 0;
left: -5%;
width: 105%;
height: 105%;
background-image:
linear-gradient(115deg, transparent 2.8%, #444 3%, #444 16%, transparent 16%),
linear-gradient(125deg, transparent 10%, #444 10%, #444 17%, #222 46.8%, transparent 47%),
linear-gradient(125deg, transparent 46%, rgba(0, 0, 0, 0.5) 46.5%, rgba(0, 0, 0, 0.25) 49%, transparent 53%),
linear-gradient(to right, #444, #666),
linear-gradient(#444, #444),
linear-gradient(140deg, transparent 45%, #fff 45%, #eee 96.8%, rgba(170, 170, 170, 0) 97%)
;
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 0.4em, 94% 0.2em, 100% 100%;
background-repeat: no-repeat;
background-position: 0 0, 0 0, 0 0, 0 95.8%, 0 100%, 0 0;
}