Telegram Group Join Now
Book Page Turn Flip Animation Using HTML & Pure CSS Codepen
Welcome to the Codewithrandom blog. In this blog, we learn how to create Book Page Flip Animation. We use HTML and CSS for Book Page Flip Animation With Codepen Code.
| Code by | Amit Sheen |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | No |
ADVERTISEMENT
I hope you enjoy our blog so let’s start with a basic HTML Structure for the Page Turn Flip Animation.
Simple Portfolio Website Using Html And Css With Source Code
HTML Code Book Page Flip Animation
<div class="imgLoader"></div> <div class="container"> <h1 class="title"> Turning pages<br>with css </h1> <div class="credit"> * Images loaded randomly from Picsum.photos </div> <div class="book"> <div class="gap"></div> <div class="pages"> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> </div> <div class="flips"> <div class="flip flip1"> <div class="flip flip2"> <div class="flip flip3"> <div class="flip flip4"> <div class="flip flip5"> <div class="flip flip6"> <div class="flip flip7"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
First, we’ll make an image loader container with the div tag, and then inside of that container, with the <h1> tag, we’ll add the heading “Turning pages with CSS.” To make six pages using the div tag, we will now create another div tag for the book. Last but not least, we’ll build the flips container, which we’ll use with CSS to add the page-turn effect. Seven flip containers will be built inside the image-loading container.
50+ HTML, CSS & JavaScript Projects With Source Code
There is all the Html code for the Book Page Turn Flip Animation. Now, you can see output without Css, then we write Css Code for the Book Page Turn Flip Animation.
Only Html Code Output
CSS Code Book Page Flip Animation
@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
* {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
font-family: "Indie Flower", cursive;
background-color: #eee;
color: #555;
text-align: center;
padding: 4em 0;
}
.imgLoader {
position: fixed;
animation: preLoad 1s steps(1);
width: 1px;
height: 1px;
}
@keyframes preLoad {
0% {
background-image: url("https://picsum.photos/420/300?random=1");
}
10% {
background-image: url("https://picsum.photos/420/300?random=2");
}
20% {
background-image: url("https://picsum.photos/420/300?random=3");
}
30% {
background-image: url("https://picsum.photos/420/300?random=4");
}
40% {
background-image: url("https://picsum.photos/420/300?random=5");
}
100% {
display: none;
}
}
.container {
position: relative;
width: 420px;
border: #fff solid 2px;
border-radius: 4px;
height: 420px;
}
.title {
position: absolute;
top: 45px;
left: 0;
width: 100%;
font-size: 2em;
font-weight: normal;
line-height: 1;
}
.credit {
position: absolute;
top: 100%;
left: 0;
font-size: 0.9em;
text-align: left;
}
.book {
position: relative;
perspective: 630px;
perspective-origin: center 50px;
transform: scale(1.2);
filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.25));
}
.page {
width: 210px;
height: 300px;
background-color: #bbb;
position: absolute;
top: 0px;
right: 50%;
transform-origin: 100% 100%;
border: solid #555 2px;
background-size: 420px 300px;
background-position: center;
transform-style: preserve-3d;
}
.page:nth-child(1) {
transform: rotateX(60deg) rotateY(3deg);
}
.page:nth-child(2) {
transform: rotateX(60deg) rotateY(4.5deg);
}
.page:nth-child(3) {
transform: rotateX(60deg) rotateY(6deg);
animation: nextPage 25s infinite -24s steps(1);
background-size: 420px 300px;
background-position: -2px -2px;
}
.page:nth-child(4) {
transform: rotateX(60deg) rotateY(177deg);
}
.page:nth-child(5) {
transform: rotateX(60deg) rotateY(175.5deg);
}
.page:nth-child(6) {
transform: rotateX(60deg) rotateY(174deg);
overflow: hidden;
}
.page:nth-child(6)::after {
content: "";
width: 210px;
height: 300px;
position: absolute;
top: 0px;
right: 0%;
transform-origin: center;
transform: rotateY(180deg);
animation: nextPage 25s -20s infinite steps(1);
background-size: 420px 300px;
background-position: 100% -2px;
}
@keyframes nextPage {
0% {
background-image: url("https://picsum.photos/420/300?random=1");
}
20% {
background-image: url("https://picsum.photos/420/300?random=2");
}
40% {
background-image: url("https://picsum.photos/420/300?random=3");
}
60% {
background-image: url("https://picsum.photos/420/300?random=4");
}
80% {
background-image: url("https://picsum.photos/420/300?random=5");
}
}
.gap {
width: 10px;
height: 300px;
background: none;
transform: rotateX(60deg);
transform-origin: bottom;
position: absolute;
top: 0px;
left: calc(50% - 5px);
}
.gap::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
background-color: #555;
width: 10px;
height: 5px;
border-radius: 50%;
}
.pages, .flips {
transform-style: preserve-3d;
}
.flip {
width: 32px;
height: 300px;
position: absolute;
top: 0px;
transform-origin: 100% 100%;
right: 100%;
border: solid #555;
border-width: 2px 0px;
perspective: 4200px;
perspective-origin: center;
transform-style: preserve-3d;
background-size: 420px 300px;
}
.flip::after {
content: "";
position: absolute;
top: 0px;
right: 0%;
width: 100%;
height: 100%;
transform-origin: center;
background-size: 420px 300px;
}
.flip.flip1 {
right: 50%;
animation: flip1 5s infinite ease-in-out;
border-width: 2px 2px 2px 0;
}
.flip.flip1::after {
animation: nextFlip1 25s -20s infinite steps(1);
}
.flip:not(.flip1) {
right: calc(100% - 2px);
top: -2px;
transform-origin: right;
animation: flip2 5s ease-in-out infinite;
}
.flip.flip2::after {
animation: nextFlip2 25s -20s infinite steps(1);
}
.flip.flip3::after {
animation: nextFlip3 25s -20s infinite steps(1);
}
.flip.flip4::after {
animation: nextFlip4 25s -20s infinite steps(1);
}
.flip.flip5::after {
animation: nextFlip5 25s -20s infinite steps(1);
}
.flip.flip6::after {
animation: nextFlip6 25s -20s infinite steps(1);
}
.flip.flip7::after {
animation: nextFlip7 25s -20s infinite steps(1);
}
.flip.flip7 {
width: 30px;
border-width: 2px 0px 2px 2px;
}
.flip.flip7::after {
animation: nextFlip7 25s -20s infinite steps(1);
}
@keyframes flip1 {
0%, 20% {
transform: rotateX(60deg) rotateY(6deg);
}
80%, 100% {
transform: rotateX(60deg) rotateY(174deg);
}
}
@keyframes flip2 {
0%, 20% {
transform: rotateY(0deg) translateY(0px);
}
50% {
transform: rotateY(-15deg) translateY(0px);
}
}
@keyframes nextFlip1 {
0% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -178px -2px;
transform: rotateY(0deg);
}
10% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -210px -2px;
transform: rotateY(180deg);
}
20% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -178px -2px;
transform: rotateY(0deg);
}
30% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -210px -2px;
transform: rotateY(180deg);
}
40% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -178px -2px;
transform: rotateY(0deg);
}
50% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -210px -2px;
transform: rotateY(180deg);
}
60% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -178px -2px;
transform: rotateY(0deg);
}
70% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -210px -2px;
transform: rotateY(180deg);
}
80% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -178px -2px;
transform: rotateY(0deg);
}
90% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -210px -2px;
transform: rotateY(180deg);
}
}
@keyframes nextFlip2 {
0% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -148px -2px;
transform: rotateY(0deg);
}
10.5% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -238px -2px;
transform: rotateY(180deg);
}
20% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -148px -2px;
transform: rotateY(0deg);
}
30.5% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -238px -2px;
transform: rotateY(180deg);
}
40% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -148px -2px;
transform: rotateY(0deg);
}
50.5% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -238px -2px;
transform: rotateY(180deg);
}
60% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -148px -2px;
transform: rotateY(0deg);
}
70.5% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -238px -2px;
transform: rotateY(180deg);
}
80% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -148px -2px;
transform: rotateY(0deg);
}
90.5% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -238px -2px;
transform: rotateY(180deg);
}
}
@keyframes nextFlip3 {
0% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -118px -2px;
transform: rotateY(0deg);
}
11% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -268px -2px;
transform: rotateY(180deg);
}
20% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -118px -2px;
transform: rotateY(0deg);
}
31% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -268px -2px;
transform: rotateY(180deg);
}
40% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -118px -2px;
transform: rotateY(0deg);
}
51% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -268px -2px;
transform: rotateY(180deg);
}
60% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -118px -2px;
transform: rotateY(0deg);
}
71% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -268px -2px;
transform: rotateY(180deg);
}
80% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -118px -2px;
transform: rotateY(0deg);
}
91% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -268px -2px;
transform: rotateY(180deg);
}
}
@keyframes nextFlip4 {
0% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -88px -2px;
transform: rotateY(0deg);
}
11.5% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -298px -2px;
transform: rotateY(180deg);
}
20% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -88px -2px;
transform: rotateY(0deg);
}
31.5% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -298px -2px;
transform: rotateY(180deg);
}
40% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -88px -2px;
transform: rotateY(0deg);
}
51.5% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -298px -2px;
transform: rotateY(180deg);
}
60% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -88px -2px;
transform: rotateY(0deg);
}
71.5% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -298px -2px;
transform: rotateY(180deg);
}
80% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -88px -2px;
transform: rotateY(0deg);
}
91.5% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -298px -2px;
transform: rotateY(180deg);
}
}
@keyframes nextFlip5 {
0% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -58px -2px;
transform: rotateY(0deg);
}
12% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -328px -2px;
transform: rotateY(180deg);
}
20% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -58px -2px;
transform: rotateY(0deg);
}
32% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -328px -2px;
transform: rotateY(180deg);
}
40% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -58px -2px;
transform: rotateY(0deg);
}
52% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -328px -2px;
transform: rotateY(180deg);
}
60% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -58px -2px;
transform: rotateY(0deg);
}
72% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -328px -2px;
transform: rotateY(180deg);
}
80% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -58px -2px;
transform: rotateY(0deg);
}
92% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -328px -2px;
transform: rotateY(180deg);
}
}
@keyframes nextFlip6 {
0% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -28px -2px;
transform: rotateY(0deg);
}
12.5% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -358px -2px;
transform: rotateY(180deg);
}
20% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -28px -2px;
transform: rotateY(0deg);
}
32.5% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -358px -2px;
transform: rotateY(180deg);
}
40% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -28px -2px;
transform: rotateY(0deg);
}
52.5% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -358px -2px;
transform: rotateY(180deg);
}
60% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -28px -2px;
transform: rotateY(0deg);
}
72.5% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -358px -2px;
transform: rotateY(180deg);
}
80% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -28px -2px;
transform: rotateY(0deg);
}
92.5% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -358px -2px;
transform: rotateY(180deg);
}
}
@keyframes nextFlip7 {
0% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -2px -2px;
transform: rotateY(0deg);
}
13% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -388px -2px;
transform: rotateY(180deg);
}
20% {
background-image: url("https://picsum.photos/420/300?random=2");
background-position: -2px -2px;
transform: rotateY(0deg);
}
33% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -388px -2px;
transform: rotateY(180deg);
}
40% {
background-image: url("https://picsum.photos/420/300?random=3");
background-position: -2px -2px;
transform: rotateY(0deg);
}
53% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -388px -2px;
transform: rotateY(180deg);
}
60% {
background-image: url("https://picsum.photos/420/300?random=4");
background-position: -2px -2px;
transform: rotateY(0deg);
}
73% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -388px -2px;
transform: rotateY(180deg);
}
80% {
background-image: url("https://picsum.photos/420/300?random=5");
background-position: -2px -2px;
transform: rotateY(0deg);
}
93% {
background-image: url("https://picsum.photos/420/300?random=1");
background-position: -388px -2px;
transform: rotateY(180deg);
}
}
.twitterLink {
position: fixed;
bottom: 0.5em;
right: 0.5em;
}
.twitterLink img {
width: 2em;
filter: grayscale(100%);
transition: filter 0.25s;
}
.twitterLink img:hover {
filter: grayscale(0%);
}
How to Create a Weather App using JavaScript
Step1:We’ll first import the “Indie Flower” typeface from Google into our turn page project before setting the padding, margin, and box-sizing property to “border-box” using the universal selector (*).
The font family will be set to “Indie Flower” inside the body element selector, and the background colour property will be used to set the font colour to “dark-gray” and the background colour to “off-white.”
Step2:We will now choose the image loader container using the class identifier (.imgloader). We’ll assign the width and height to “1 px” and the position to “fixed” using the position property. In order to create the page turn motion inside the keyframe, we will now add key frames to our image loader. We’ll alter the backdrop at various keyframes.
Step3: Using the class selector, we will now choose the page container; we will then set the position to relative; and using the transform property, we will scale the picture to “2” and set the width and height to 210px and 300px, respectively. The pages will now be selected using the page property, and their positions will be changed using the shift property.
Portfolio Website using HTML and CSS (Source Code)
Now we have completed our Book Page Turn Flip Animation Using HTML and CSS Codepen Project.
Here is our final updated output HTML + CSS.
Video Output:
Final Output Of Book Page Flip Animation
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
ADVERTISEMENT
Now we have completed our Page Turn Flip Animation Project. Here is our updated output with Html and Css. Hope you like the Book Page Turn Flip Animation Using HTML and CSS Codepen. you can see output project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create Book Page Turn Flip Animation Using HTML and CSS Codepen. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
code by – Amit Sheen
Which code editor do you use for this Book Page Turn Flip Animation coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
What is the use of Book Page turn Animation?
An intermediate project called “Book Page Turn Animation” can be used to create an animated website and add user interaction.
What are the important properties required to create page turn animation?
Important properties required for the animation are:
1. Importing images using the background property
2. Using Keyframes property to change the background at every frame.
3. Using Animation and transform property to add the page turn inside our project.
could you please upload css not scss. It's getting error.
why the scss code is giving error in this #{$i * 20}% part at all the code
This comment has been removed by the author.