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.

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

 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