Create an animated 3D book in CSS, step by step
Posted on July 23, 2020
A couple of days ago, I created a 3D version for the book I’m writing, with CSS only. Because I couldn’t find an easy way to do it (most websites offered to generate images only, and not with the best quality), I created a small 3D book image CSS generator and posted it on Hacker News. There was a lot of interest for it, and since it’s definitely not that complicated, here is a small tutorial to learn how to create your own version.
Here is what the final result will look like:
Be ready, we’ll talk about 3D, geometry, animation, and shadow; what an exciting programme! Let’s go!
Step 1 - Set up the scene
We want the HTML to be as simple as possible, i.e. not with a lot of divs and
classes. The most simple solution I found was to have a .book-container
div
(which can be a link for instance) and a .book
div, containing the cover as an
img
(until the last step it will be a div with a background so it’s more easy
to see the progress).
<div class="book-container">
<div class="book">
<!-- will be a <img> at the end -->
<div />
</div>
</div>
We give a size to the .book-container
and a border, which is not required but
makes things easier to see at first. We also make sure the elements in it (the
.book
) are centerer horizontally and vertically:
.book-container {
border: 1px solid lightgray;
width: 500px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
The .book
itself has a fixed size (the size of the cover), and some rounded
angles:
.book {
width: 200px;
height: 300px;
}
.book > :first-child {
background: #0d47a1aa;
width: 200px;
height: 300px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
As a result, we have a first shot of our cover:
Step 2 - Add some 3D
To add 3D and perspective, only some CSS properties are needed (it’s amazing
what CSS makes us able to do these days…). First we set the transform-style
and perspective
parameters for the .book-container
(you can adjust the
perspective and see the different results), then we apply a rotation against the
vertical axis (rotateY
) to the book:
.book-container {
/* ... */
transform-style: preserve-3d;
perspective: 400px;
}
.book {
/* ... */
transform: rotateY(-30deg);
}
Step 3 - Add the pages
To see the pages on the side, instead of adding a new div, we’ll use the
pseudo-element ::before
, which can be considered as an implicit div. As a
first step, let’s just give it a size, and its default position: at the origin
of the parent div (the .book
):
.book {
/* ... */
position: relative;
}
.book::before {
position: absolute;
content: ' ';
background: #bf360caa;
height: 300px;
width: 50px;
}
Step 4 - Move the pages to the right place
Here is where it’s getting interesting. To put our pages at the right place, we need to apply them several transformations:
- first, we must translate them horizontally of the book’s width (200px), minus half the book’s thickness,
- then we rotate the pages of 90 degrees (still against the vertical axis),
- and finally we translate them again of half the book’s thickness (still against the horizontal X axis, since it was rotated by the translation as well).
These steps can seem complicated, but if you try to apply them one after the other to see the result, they really aren’t.
.book::before {
/* ... */
transform: translateX(calc(200px - 50px / 2))
rotateY(90deg)
translateX(calc(50px / 2));
}
To make the pages slighly smaller than the cover, we can resize the pages, move a little their origin position, and update the first translation:
.book::before {
/* ... */
height: calc(300px - 2 * 3px);
top: 3px;
transform: translateX(calc(200px - 50px / 2 - 3px)) /* ... */
}
Step 5 - Add the back cover
Since we used the ::before
element for the pages, let’s use the ::after
one
for the back cover. Its dimensions and origin position are the same as the front
cover:
.book::after {
content: ' ';
position: absolute;
left: 0;
width: 200px;
height: 300px;
background: #1b5e20aa;
}
Positioning it is a lot easier than the pages: we just have to apply one translation against the Z axis, of a value equal to the book’s thickness:
.book::after {
/* ... */
transform: translateZ(-50px);
}
Step 6 - Add some animation
I promised you animation, and for now our book image is still a little bit too static. Let’s fix that!
The first animation we’ll add is to rotate the book on hover. To do that, let’s
specify that we want to animate the transform
property of the .book
via the
transition
attribute.
.book {
/* ... */
transition: transform 1s ease;
}
Then let’s apply the rotation we want (0 degrees, so the book will pass from
“rotated” to not “rotated”) in the .book:hover
section:
.book:hover {
transform: rotate(0deg);
}
The second animation we want is when the page is loaded: we want the book to
pass from non-rotated to rotated (the opposite animation). This can be done
using the animation
attribute and a @keyframe
animation:
.book {
/* ... */
animation: 1s ease 0s 1 initAnimation;
}
@keyframes initAnimation {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-30deg); }
}
Step 7 - Add the image and some shadow
Now that all our elements are correctly positionned and animated, we just need to display the actual book cover instead of colored backgrounds.
<div class="book-container">
<div class="book">
<img
src="https://d2sofvawe08yqg.cloudfront.net/outstanding-developer/hero2x?1595108679"
/>
</div>
</div>
As a nice small addition, let’s add some shadow to the book, and we’re done!
.book > :first-child {
/* ... */
box-shadow: 5px 5px 20px #666;
}
.book::before {
/* ... */
background: #fff;
}
.book::after {
/* */
background: #01060f;
box-shadow: -10px 0 50px 10px #666;
}
Our animated 3D book is now complete! You can find the complete code of this tutorial on CodePen, or have a look at the generator I created or its source code on GitHub.
Note that to make it work with Edge, I had to remove the CSS variables and the
calculations (calc(...)
) in the transform
attribute. It’s a little sad; the
first version used CSS variables so size was configurable without updating the
core CSS. But at least now it works everywhere! (Okay, I haven’t tested in
Internet Exporer, and I won’t 😉)
Hope you liked this tutorial! I’m not a CSS expert, but I enjoyed very much creating this 3D book snippet. See you soon!
Cover photo by Dawid Małecki.
Check my latest articles
- Using Zod & TypeScript for more than user input validationMarch 8, 2023If you have ever created an API or a form accepting user input, you know what data validation is, and how tedious it can be. Fortunately, libraries can help us, such as Yup or Zod. But recently, I realized that these libraries allow patterns that go much farther than input validation. In this post, I’ll show you why I now use them in most of my TypeScript projects.
- Display your Gumroad products on your Next.js websiteFebruary 26, 2023If you sell some products on Gumroad and also have a personal website, maybe you’d like to automatically list your products on this website. And if your website is based on Next.js, you can do it pretty easilly using Gumroad API.
- Use Next.js Image component in posts with MarkdownFebruary 19, 2023Next.js has a wonderful Image component that lazy loads images and optimizes their dimensions. Here is how to use it when generating your blog from Markdown.