body, html { height: 100%; margin: 0; padding: 0; } .flipbook-container { width: 800px; /* Set your desired width */ height: 500px; /* Set your desired height */ perspective: 1000px; margin: 50px auto; } .flipbook-page { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; } .flipbook-page img { width: 100%; height: 100%; } /* Add more CSS styles for flipping effects if desired */ const flipbookContainer = document.querySelector('.flipbook-container'); let currentPage = 0; function flip() { currentPage++; if (currentPage > flipbookContainer.children.length - 1) { currentPage = 0; } flipbookContainer.style.transform = `rotateY(${currentPage * -180}deg)`; } // Add event listener to flip the pages when the container is clicked flipbookContainer.addEventListener('click', flip);