3D Flipping Book

Okay, here is the setup for the 3D flipping book. 3D Flipping Book

body { margin: 0; font-family: sans-serif; background-color: #f0f0f0; /* Light background for contrast */ overflow: hidden; /* Prevent body scrollbars */ } .book-container { display: flex; justify-content: center; align-items: center; width: 100%; max-height: 600px; /* Max height constraint */ height: 95vh; /* Use viewport height slightly less than full */ padding: 20px; box-sizing: border-box; overflow: hidden; /* Prevent content overflow */ } .book { width: 90%; /* Relative width */ max-width: 1000px; /* Max width for larger screens */ height: 100%; /* Fill the container height */ position: relative; perspective: 2500px; /* Increased perspective for better 3D */ transform-style: preserve-3d; /* Ensure children maintain 3D */ } .page { width: 50%; /* Each page is half the book width */ height: 100%; position: absolute; top: 0; right: 0; /* Start all pages on the right */ transform-origin: left center; /* Hinge on the left spine */ transform-style: preserve-3d; transition: transform 1s ease-in-out; /* Smooth flip */ cursor: pointer; border-left: 1px solid #aaa; /* Simulate spine */ background-color: white; /* Page background */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */ } .page-content { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* Hide the back side when facing away */ display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 15px; /* Padding inside the page */ box-sizing: border-box; } .page-content.front { transform: rotateY(0deg); /* Front face */ background-color: #fff; } .page-content.back { transform: rotateY(180deg); /* Back face, flipped */ background-color: #fdfdfd; /* Slightly different back color */ } .page-content img { max-width: 100%; max-height: 100%; object-fit: contain; /* Scale image nicely */ display: block; user-select: none; /* Prevent image selection */ -webkit-user-drag: none; /* Prevent image dragging */ } .navigation { position: absolute; bottom: 5px; /* Closer to the bottom */ left: 50%; transform: translateX(-50%); z-index: 1000; /* Ensure buttons are on top */ display: flex; gap: 20px; background-color: rgba(255, 255, 255, 0.8); /* Slight background for visibility */ padding: 5px 10px; border-radius: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } const { useState } = React; const { Box, IconButton, ThemeProvider, createTheme } = MaterialUI; // Use spans for icons directly for UMD compatibility const ArrowBackIosIcon = () => React.createElement('span', { className: 'material-icons' }, 'arrow_back_ios'); const ArrowForwardIosIcon = () => React.createElement('span', { className: 'material-icons' }, 'arrow_forward_ios'); const imageUrls = [ "https://www.botimeirisoft.com/custom/ARTI1.png", "https://www.botimeirisoft.com/custom/ARTI10.png", "https://www.botimeirisoft.com/custom/ARTI11.png", "https://www.botimeirisoft.com/custom/ARTI12.png", "https://www.botimeirisoft.com/custom/ARTI13.png", "https://www.botimeirisoft.com/custom/ARTI14.png", "https://www.botimeirisoft.com/custom/ARTI15.png", "https://www.botimeirisoft.com/custom/ARTI16.png", "https://www.botimeirisoft.com/custom/ARTI17.png", "https://www.botimeirisoft.com/custom/ARTI19.png", // ARTI18 seems missing "https://www.botimeirisoft.com/custom/ARTI2.png", "https://www.botimeirisoft.com/custom/ARTI20.png", "https://www.botimeirisoft.com/custom/ARTI21.png", "https://www.botimeirisoft.com/custom/ARTI22.png", "https://www.botimeirisoft.com/custom/ARTI23.png", "https://www.botimeirisoft.com/custom/ARTI24.png", "https://www.botimeirisoft.com/custom/ARTI25.png", "https://www.botimeirisoft.com/custom/ARTI3.png", "https://www.botimeirisoft.com/custom/ARTI4.png", "https://www.botimeirisoft.com/custom/ARTI5.png", "https://www.botimeirisoft.com/custom/ARTI6.png", "https://www.botimeirisoft.com/custom/ARTI7.png", "https://www.botimeirisoft.com/custom/ARTI8.png", "https://www.botimeirisoft.com/custom/ARTI9.png", ]; // Ensure even number of images for pages if (imageUrls.length % 2 !== 0) { imageUrls.push(""); // Add placeholder for the last page back if needed } const totalPages = imageUrls.length / 2; // Total number of page *leaves* function Page({ index, frontImage, backImage, activePageIndex, totalPages }) { const isFlipped = index < activePageIndex; // Z-index logic: // Flipped pages (left side): Higher index means closer to the spine, should have lower z-index. // Unflipped pages (right side): Lower index means closer to the spine, should have lower z-index. // Flipped pages should generally be above unflipped ones during transition. const zIndex = isFlipped ? index + 1 : totalPages - index; const rotation = isFlipped ? -180 : 0; // Add slight rotation to unflipped pages for a stacked effect // Only apply if the page is on the right stack (not flipped) const stackRotation = (index >= activePageIndex) ? (totalPages - index) * -0.3 : 0; return (

{frontImage ? {`Page

: Page {index * 2 + 1}}

{backImage ? {`Page

: Page {index * 2 + 2}}

); } function FlippingBook() { // State represents the index of the first page *leaf* currently on the right side. // 0 means cover is closed (all pages on right). // `totalPages` means book is fully open to the last page. const [activePageIndex, setActivePageIndex] = useState(0); const handleNextPage = () => { setActivePageIndex((prev) => Math.min(prev + 1, totalPages)); }; const handlePrevPage = () => { setActivePageIndex((prev) => Math.max(prev - 1, 0)); }; // Create page data pairs const pages = []; for (let i = 0; i < totalPages; i++) { pages.push({ index: i, // Index of the page *leaf* (0 to totalPages-1) frontImage: imageUrls[i * 2], backImage: imageUrls[i * 2 + 1], }); } return ( {/* Render pages */} {pages.map((page) => ( ))} {/* Navigation */} ); } const theme = createTheme(); function App() { return ( ); } ReactDOM.render(, document.getElementById('root'));