In this article, we will create a book flip animation using HTML, CSS, and Javascript.
This animation can be great for a book-related website. Users will love this type of engaging animation.
Also Read - Animated Expanding Button
Output
First here is the output
See the Pen Book page flip animation by Pizzabote (@pizzabote) on CodePen.
Step 1
First, we will start by writing the HTML structure of our page
<div class="container">
<div class="page" id="first">
<div class="back">
<div class="outer">
<div class="content">
<img
src="https://tympanus.net/Development/BookBlock/images/demo1/1.jpg"
/>
</div>
</div>
</div>
</div>
<div class="page" id="second">
<div class="front">
<div class="outer">
<div class="content">
<img
src="https://tympanus.net/Development/BookBlock/images/demo1/1.jpg"
/>
</div>
</div>
</div>
<div class="back" id="third">
<div class="outer">
<div class="content">
<div class="helper-class-to-make-bug-visbile">
<img
src="https://tympanus.net/Development/BookBlock/images/demo1/2.jpg"
/>
</div>
</div>
</div>
</div>
</div>
<div class="page" id="fourth">
<div class="front">
<div class="outer">
<div class="content">
<img
src="https://tympanus.net/Development/BookBlock/images/demo1/2.jpg"
/>
</div>
</div>
</div>
</div>
<div id="prev"></div>
<div id="next"></div>
</div>
Now, that we have a basic structure let’s add some CSS to it
Step 2
For, now you can follow along with me by copying the below code.
body {
margin: 4em;
}
.container {
width: 400px;
height: 300px;
position: relative;
z-index: 100;
-webkit-perspective: 1300px;
perspective: 1300px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.page {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
width: 50%;
height: 100%;
left: 50%;
-webkit-transform-origin: left center;
transform-origin: left center;
}
#first,
#first .back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#first {
z-index: 102;
}
#second {
z-index: 103;
transition: transform 0.8s ease-in-out;
}
#third .content {
width: 400px;
}
#fourth {
z-index: 101;
}
.page > div,
.outer,
.content,
.helper-class-to-make-bug-visbile {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.page > div {
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.back {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.outer {
width: 100%;
overflow: hidden;
z-index: 999;
}
/* problematic class: `.content` */
.content {
width: 200%;
background: red;
}
.front .content {
left: -100%;
}
/* controls */
#prev,
#next {
position: absolute;
width: 50%;
height: 100%;
z-index: 999;
}
#prev:hover,
#next:hover {
background: rgba(0, 0, 0, 0.05);
cursor: pointer;
}
#prev {
top: 0;
left: 0;
}
#next {
top: 0;
left: 50%;
}
Step 3
Finally, we need to add functionality to it by writing some javascript to it.
let prev = document.getElementById("prev");
let next = document.getElementById("next");
prev.addEventListener("click", prevImg);
next.addEventListener("click", nextImg);
let second = document.getElementById("second");
function prevImg() {
second.style.msTransform = "rotateY(0deg)";
second.style.webkitTransform = "rotateY(0deg)";
second.style.transform = "rotateY(0deg)";
}
function nextImg() {
second.style.msTransform = "rotateY(-180deg)";
second.style.webkitTransform = "rotateY(-180deg)";
second.style.transform = "rotateY(-180deg)";
}
There you have it.
This cool project is available on Codepen and you can go there by clicking here.