3D hover effect to open a book and reveal the synopsis of the book. I wanted to try out using realistic reflections. You can see the light "reflect" off the cover as it opens.
To see it action:
- You can check out the codepen, or
- Run the local dev server (
npm run dev) and find it at http://localhost:3000/shiny-book-reveal/index.html.
I tried out putting a reflection underneath to give the appearance of a glossy surface. This can be done with -webkit-box-reflect, which is a non-standard property but has support in all major browsers except Firefox. However, I removed it as it doesn't work in a realistic way with the hover effect.