JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<div class="halfpages">
<div class="pageflip-wrapper">

<div class="pageflip"></div>
</div>
<div class="halfpage">
<!-- <img src="https://v.wpimg.pl/b2QtMS5qTVMwFjtgGgpARnNObzBFGT1fMBkucRlTFxBrVmJiB0NTAGhbfGQERlYAYkV_ZgVGVR04Gjk2RxABRjgCKH5THg1WfEVjOUUWQE8" alt=""> -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="svg-triangle">
    <polygon points="0,40 100,0 0,100 200"/>
  </svg> -->
<h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</h1>
<p>
Optio sunt laudantium, amet asperiores, facere ex. Sed ut porro eum delectus illum impedit. Doloremque unde ratione, facilis nisi numquam labore beatae.
</p>
</div>
<div class="halfpage2">
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="svg-triangle">
    <polygon points="0,40 100,0 0,100 200"/>
  </svg> -->
  <!-- <img src="https://mamc.wpcdn.pl/128837/1714131106118/me-interactive4.png" alt=""> -->
<h1>
Consequuntur hic cupiditate, culpa, fugit porro illo deleniti, 
</h1>
<p>
beatae repellat, earum architecto debitis officia distinctio eaque odit reprehenderit consectetur esse velit? Debitis.
</p>
</div>
</div>
<button id="test">
Test
</button>

CSS

.halfpages {
  width: 300px;
  height: 600px;
  overflow: hidden;
  position: relative;
}

.halfpage {
  width: 300px;
  height: 600px;
  overflow: hidden;
  background: tomato;
  color: white;
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  animation: .5s linear 3s infinite alternate pagechange;
  /* transform: scaleY(-1); */
  padding: 20px;
  box-shadow: 3em 5em 1em gold;
  filter: drop-shadow(-3px 22px 10px rgba(50, 50, 0, 0.5));
}

.halfpage2 {
  width: 300px;
  height: 600px;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
  background: maroon;
  color: white;
  position: absolute;
  z-index: 1;
  box-shadow: 10px 5px 5px red;
}

.pageflip-wrapper {
  filter: drop-shadow(-3px 10px 10px rgba(50, 50, 0, 0.5));
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: visible;
  /*setTimeout hack*/
  transition-property: transform;
  transition-delay: 1s;
  transition-duration: 10ms;
  transition-timing-function: linear;
  /* animation: 1s linear 0s infinite normal hideFlip; */
}

.pageflip-wrapper-hide {
  transform: translate(-100%, 0);
  /* clip-path: none; */
}

.pageflip {
  position: absolute;
  /* transform: scaleY(-1); */
  z-index: 3;
  overflow: visible;
  /* opacity: .9; */
  /*width: 100%;
  height: 150%;
  bottom: -25%; */
  /* clip-path: polygon(60% 35%, 100% 0, 100% 100%, 87% 100%); */
  animation: .5s linear 3s infinite alternate pageflip;
  background: linear-gradient(90deg, rgba(255,255,255,1) 38%, rgba(241,241,241,1) 48%, rgba(238,238,238,1) 78%, rgba(228,228,228,1) 91%, rgba(97,97,97,1) 100%);
  /* background: #CCC; */
}

/* 
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(94% 0, 86% 4%, 100% 100%, 100% 100%);
clip-path: polygon(84% 0, 65% 4%, 84% 100%, 91% 100%);
clip-path: polygon(76% 0, 51% 4%, 74% 100%, 86% 100%);
clip-path: polygon(65% 0, 30% 5%, 48% 100%, 74% 100%);
clip-path: polygon(48% 0, 14% 5%, 34% 100%, 65% 100%); raise
clip-path: polygon(48% 0, 8%...

JavaScript

const test = document.getElementById("test");
const pageWrapper = document.querySelector(".pageflip-wrapper");

test.addEventListener('click', () => {
console.log('dfsdsf');
  pageWrapper.classList.toggle('pageflip-wrapper-hide');
});