Page Flip Animation CSS | Page Flip Using HTML & CSS







Page Flip Animation CSS| Page Flip Using HTML CSS & javascript

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Page Flip HTML. We use HTML, CSS, and javascript for this Page Flip HTML. Hope you enjoy our blog so let’s start with a basic HTML structure for a Page Flip HTML.

Page Flip animation HTML code

 <section>  
<div class="left next"></div>
<div class="right next"></div>
<div class="left current"></div>
<div class="right current"></div>
</section>
<h1 id="title">tap the image to flip</h1>

This is all the Page Flip Animation HTML code. Now, you can see output without CSS, then we write CSS & javascript for the Page Flip HTML.

output

Page Flip Animation HTML

Page Flip Animation CSS Code

 :root {  
--duration: 500ms;
--ease-in: cubic-bezier(0.85, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.3, 1);
--ease-in-out: ease-in-out;
--image-current: url(https://images.unsplash.com/photo-1630847911146-edd8828abf14?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjUxMjQ0Ng&ixlib=rb-1.2.1&q=85);
--image-next: url(https://images.unsplash.com/photo-1596774468032-915cdd39ea39?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjUxMjg1MQ&ixlib=rb-1.2.1&q=85);
}
html, body, section {
height: 100%;
}
@keyframes zoom-1 {
0%, 100% { transform: scale(0.8); }
50% { transform: scale(0.75); box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.1); }
}
@keyframes zoom-2 {
0%, 100% { transform: scale(0.8); }
50% { transform: scale(0.75); box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.1); }
}
section {
animation: zoom-1 calc(var(--duration) * 2) var(--ease-in-out);
border-radius: 1vh;
box-shadow: 0 2vh 4vh rgba(0, 0, 0, 0.2);
display: flex;
perspective: 2000px;
position: relative;
transform: scale(0.8);
width: 100%;
}
/* duplicating the animation to get it to fire again */
section.flip {
animation: zoom-2 calc(var(--duration) * 2) var(--ease-in-out);
}
.left,
.right {
backface-visibility: hidden;
background-attachment: fixed;
background-position: center center;
background-size: cover;
height: 100%;
position: absolute;
top: 0;
transition-property: transform;
transition-duration: var(--duration);
width: 50%;
}
.current {
background-image: var(--image-current);
}
.next {
background-image: var(--image-next);
}
.left {
border-radius: 1vh 0 0 1vh;
left: 0;
transform-origin: 100% 50%;
}
.right {
border-radius: 0 1vh 1vh 0;
right: 0;
transform-origin: 0% 50%;
}
.next.left {
transform: rotateY(90deg);
transition-delay: 0ms;
transition-timing-function: var(--ease-in);
z-index: 9;
}
.current.right {
transform: rotateY(0deg);
transition-delay: var(--duration);
transition-timing-function: var(--ease-out);
}
.flip .current.right {
transform: rotateY(-90deg);
transition-delay: 0ms;
transition-timing-function: var(--ease-in);
}
.flip .next.left {
transform: rotateY(0deg);
transition-delay: var(--duration);
transition-timing-function: var(--ease-out);
}
h1 {
bottom: 3vh;
font-size: 2vh;
left: 0;
position: absolute;
text-align: center;
transition: opacity 500ms var(--ease-out);
width: 100%;
}

Here is our updated output CSS.

output

Page Flip Animation CSS output

Javascript code 

 const section = document.querySelector("section");  
let clicked = false;
section.addEventListener("click", (e) => {
section.classList.toggle("flip");
if (!clicked) {
clicked = true;
document.getElementById("title").style.opacity = 0;
}
});

Final output

Page Flip Animation final


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Page Flip HTML. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Page Flip HTML using simple HTML & CSS, and javascript. 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 

Codepen by – Jake Albaugh

Share on:

0 thoughts on “Page Flip Animation CSS | Page Flip Using HTML & CSS”

Leave a Comment