FlipBook

Simple CSS-driven 3D flip-book

Tips

• Edit the page "thicnkess" by setting the desired .page's --z value.
• To dynamically open a desired page via JavaScript change the current --c CSS var like:

  elBook.style.setProperty("--c", index);

Stack Overflow answer: Create a flip-book using CSS and JS

Current Features

• Smooth CSS3 transition
• Multiple pages flip animation
• Click page to flip
• Drag page to flip
• Component Class
• Switch 3D / top-down view
• Dynamic pages Z (thickness)
• Better shadows
• Paper flip distortion

---

Licence

MIT