3D Book Showcase

An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms.


Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interactivity the user might find entertaining. The idea is taken from Lift Interactive (scroll down to see the book style).

Note that this only works in browsers that support CSS 3D transforms. For other browsers, we simply show the book cover.

The demos are best viewed in WebKit browsers.


What we did was to build a structure that we can transform into a 3D object with CSS 3D transforms. Our book has six main sides and one inner page element that we’ll use to paginate through some content, simulating something like a “view inside” functionality. We could have used the BookBlock jQuery plugin for flipping through the pages but we didn’t want to overload it with too many effects.

A book is build up as follows:

<div class="bk-book">

	<div class="bk-front">
		<div class="bk-cover">
				<span>Anthony Burghiss</span>
				<span>A Catwork Orange</span>
		<div class="bk-cover-back"></div>

	<div class="bk-page">
		<div class="bk-content bk-content-current">
			<p>Red snapper Kafue pike fangtooth humums slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream. Billfish hog sucker trout-perch lenok orbicular velvetfish. Delta smelt striped bass, medusafish dragon goby starry flounder cuchia round whitefish northern anchovy spadefish merluccid hake cat shark Black pickerel. Pacific cod.</p>
		<div class="bk-content">
			<!-- ... -->
		<div class="bk-content">
			<!-- ... -->

	<div class="bk-back">
		<p>In this nightmare vision of cats in revolt, fifteen-year-old Alex and his friends set out on a diabolical orgy of robbery, rape, torture and murder. Alex is jailed for his teenage delinquency and the State tries to reform him - but at what cost?</p>

	<div class="bk-right"></div>

	<div class="bk-left">
			<span>Anthony Burghiss</span>
			<span>A Catwork Orange</span>

	<div class="bk-top"></div>

	<div class="bk-bottom"></div>

The class names are based on the sides of a book when holding it and looking at the front, the cover. Since we want to open the book cover, we need to give the front a main cover side and a back side. The back of the book will also contain some content which will be visible when flipping the book.

When hovering over a book, we will rotate it slightly.


Specifically, we rotate the whole book 35 degrees on the Y-axis:

.bk-list li .bk-book.bk-bookdefault:hover {
	transform: rotate3d(0,1,0,35deg);

When opening the book by clicking on “View inside”, the front part will flip open and we can navigate through the preview pages by clicking on the arrows.


The rotations and flipping are done by applying certain classes:

/* Transform classes */

.bk-list li .bk-viewinside .bk-front {
	transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);

.bk-list li .bk-book.bk-viewinside {
	transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);

.bk-list li .bk-book.bk-viewback {
	transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);

In the second demo, we rotate the book so that we can only see the spine, the left side. On hover we simulate the familiar movement of taking a quick look of a book by slightly moving it towards us and rotating it. When clicking on it we will open it.


A second click on the book will close it again and put it back into the shelf.

Note that this is really just a concept and highly experimental. It’s probably very buggy and has much room for improvement. But anyway, we hope you enjoyed this experiment and find it inspiring!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 53

Comments are closed.
  1. I can never let my client who’s a publisher see this. He will force me to implement this into his site. lol

  2. Codrops always amaze me… you have group of talented and gifted person in web development there….always excited when i receive email newsletter from Codrops…Keep Up The Great Work!! Thank you..

    • what do you mean about not useful???
      so naive, you dont creative i think….?

    • I suspect it is only this particular demo that is perceived as “not useful”. This interaction really only belongs in the physical world. There is no added value here for digital book readers. However, with a bit more creativity, I’m sure this CSS technique could be used in a more productive manner in the digital realm.

  3. Oh how I wish we wouldn´t have to think about “Can browser XY do this?” right NOW. What you show here is so damn cool! 😀

  4. This is very cool. Now I’m just hoping a client comes along that needs something like this.

  5. This is exactly what i needed :O

    Thanks a lot, i will steal this until the last line of code !

    And theres not even some f*ckin JS OMG !!!1!!

    I love you.

  6. This is great, thanks for posting! This is some of the best looking 3D transitions I’ve seen with CSS3.

  7. Awesome! May be it won’t be able to use in Dynamic, totally useful in Static Showcases. *shocked!

  8. Awww juz loved it…..
    Being a book-lover + an aspiring website designer,, dis was an eye candy….