The CSS 3D book effect

This page have moved to web-design-scrapbook/the-css-3d-book-flipping-effect/.

Recently Amazon updates the book cover into a 3D look book in some their paperback web page.

In my web design course, I showed how to use the CSS transform and transition to make a 3D rotation box and greeting card flipping effect.

The 3D rotation box effect:

The greeting card flipping effect:

By combining these two effects with a simple flip effect, we can create the same effect 3D book flipping effect.

Note: The book in the video is Newspaper Blackout from Austin Kleon who is an author that draws. I use this book just because this is the first book I encountered on Amazon with this flipping effect.

–mz
2013 Dec.

overlaied image when clicked on thumbnail

Makzan | Thoughts | Table of Content