How to create book page Flip Animation using HTML&CSS

Let’s create a Book page turn flip animation using HTML & Pure CSS Codepen

Hey learners welcome to the Codewithrandom blog. In this blog, we will learn how to create Book Page Flip Animation by using HTML and CSS.

Book Page Turn Flip Animation Using HTML and CSS Codepen

Code by	Amit Sheen
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	No
Responsive	No

Book Page Turn Flip Animation Table

I hope you will find our blog knowledgeable and helpful 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

Table of Contents

HTML code:

<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>

Explanation of the code :

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

Here we have the output for the above code, it doesn’t consist of CSS as we will do that in the next part given below

This was all about 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.

CSS Code :

@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

Explanation for the CSS Code given above :

Step 1:

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 color property will be used to set the font color to “dark gray” and the background color to “off-white.”

Step 2:

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. To create the page turn motion inside the keyframe, we will now add keyframes to our image loader. We’ll alter the backdrop at various keyframes.

Step 3:

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 of both HTML and CSS.

Video Output:

Final Output Of Book Page Flip Animation

<br /> See the Pen <a href="https://codepen.io/celebstori/pen/BaVVdja" target="_blank" rel="noopener"><br /> Book Page Turn Flip Animation Using HTML and CSS</a> by ankit (<a href="https://codepen.io/celebstori" target="_blank" rel="noopener">@celebstori</a>)<br /> on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Now we have completed our Page Turn Flip Animation Project. 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 learned how to create Book Page Turn Flip Animation Using HTML and CSS Codepen. For any queries, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki
code by – Amit Sheen

SOME FAQs :

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.

This Post Has 3 Comments

Raviteja March 4, 2022 Reply
could you please upload css not scss. It's getting error.
Unknown March 19, 2022 Reply
why the scss code is giving error in this #{$i * 20}% part at all the code
Syed Arif Arbaz April 9, 2022 Reply
This comment has been removed by the author.

CodeWithRandom

How to create responsive book page flip animation using HTML & CSS

HTML code:

CSS Code :

Video Output:

Final Output Of Book Page Flip Animation

SOME FAQs :

Which code editor do you use for this Book Page Turn Flip Animation coding?

What is the use of Book Page turn Animation?

What are the important properties required to create page turn animation?

This Post Has 3 Comments

Leave a Reply Cancel reply

Navigate

Subscribe Now

HTML code:

CSS Code :

Video Output:

Final Output Of Book Page Flip Animation

SOME FAQs :

Which code editor do you use for this Book Page Turn Flip Animation coding?

What is the use of Book Page turn Animation?

What are the important properties required to create page turn animation?

You Might Also Like

Calculator in HTML, CSS, JavaScript

25 Tailwind Toggle Buttons

Create Number Guessing Game Using JavaScript

This Post Has 3 Comments

Leave a Reply Cancel reply

Navigate

Subscribe Now