The CSS 3D book 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
.
overlaied image when clicked on thumbnail

Makzan | Web design scrapbook | Table of Content