3D Book Showcase

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

3DBookShowcase_Main

View demo Download source

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.

3DBookShowcase

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">
			<h2>
				<span>Anthony Burghiss</span>
				<span>A Catwork Orange</span>
			</h2>
		</div>
		<div class="bk-cover-back"></div>
	</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>
		<div class="bk-content">
			<!-- ... -->
		</div>
		<div class="bk-content">
			<!-- ... -->
		</div>
	</div>

	<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>

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

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

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

	<div class="bk-bottom"></div>
</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.

3DBookShowcase2

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.

3DBookShowcase3

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.

3DBookShowcase4

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 52

Comments are closed.
  1. 1

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

  2. 2

    How would you add a left page in this? That’s the only thing I can’t seem to figure out…

Comments are closed.