Interactive 3D Flip Book Gallery

This is an Interactive 3D Flip Book Gallery. It simulates a physical book structure where each element acts as a double-sided page. Its function is to showcase images through spatial depth, replacing standard flat carousels with a tactile flipping mechanic.

Specs

• Weight: ~2.5 KB (CSS + JS). No external assets except images.
• Performance: High. Uses GPU-accelerated rotateY and translate3d.
• Theming / Customization: Managed via CSS variables and @property definitions.
• Responsiveness: Fluid. Viewport units (svh, vw) and clamp() ensure layout integrity.
• Graceful Degradation: Fails to a static image stack if 3D transforms are unsupported.

Anatomy

The structure mimics the logic of physical binding.

• HTML (The Skeleton): A .scene container houses .bg-typography and the .galeria-book-3d component. Each .galeria-book-3d__item contains two images representing the front and back of a single page.
• CSS (The Skin): Sets the 1000px perspective. Uses backface-visibility: hidden to enable double-sided pages. Typography uses mix-blend-mode: exclusion for high-contrast visibility against changing backgrounds.
• JS (The Nervous System): Manages the is-open class. Toggles the global book-open state on the container to shift the “spine” position. Includes a global listener to close pages on outside clicks.

Logic

The elegance lies in the staggered transition delays.

transition-delay: calc((4 - var(--i)) * 0.1s), calc((4 - var(--i)) * 0.1s + 0.25s);

Each page has an index --i. When the book closes, the delays are calculated in reverse order. This prevents all pages from snapping back simultaneously. It creates a natural, sequential “stacking” effect where the top pages land first, followed by the bottom ones.

Feel

Tactile and mechanical. The page movement has weight due to the ease-in-out timing. The exclusion blend mode on the background text creates a sharp, digital contrast. Interaction feels direct. The 3D flip provides a clear sense of progress through the gallery content.