3D CSS Book Covers

You’ve seen them before, the angled shots of books like the ones above. I always thought that someone photographed them. That is, until recently, when I helped a friend redo his author website. He showed me Box Shot 3D, a program that turns book covers into three-dimensional books. I wanted to see if we could replicate a 3D book cover with CSS only. Turns out you can, with pretty nice results. In fact, the screenshot above is an image of a CSS rendering for three of Patrick’s books. Here’s how it’s done:

First, you’ll need a image of a book cover:

1. Wrap the img in some HTML, like so:

<div class="books">
  <div class="book">
    <img src="book.jpg" />
  </div>
</div>

2. Include Modernizr, so that you can detect support for 3D transforms. Note: if you’re unsure how to use Modernizr, just include this code at the bottom of your HTML file, before the closing </body> tag.

3. Apply the following styles:

/* Fallback styles */
.book {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}

.book img { vertical-align: middle; }

/*
 *  In order for this to work, you must use Modernizer
 *  to detect 3D transform browser support. This will add
 *  a "csstransforms3d" class to the HTML element.
 *
 *  Visit http://modernizr.com/ for installation instructions
 */

.csstransforms3d  .books {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.csstransforms3d  .book {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin: 0;
}

.csstransforms3d  .book img {
  position: relative;
  max-width: 100%;
}

.csstransforms3d  .book:before,
.csstransforms3d  .book:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.csstransforms3d  .book:before {
  width: 100%;
  left: 7.5%;
  background-color: #5a2d18;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d  .book:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

What happens in browsers that don’t support 3D transforms, you ask? They degrade quite nicely:

Placing several books in a row is easy. Just replicate the book DIVs, and style the back covers accordingly.

<div class="books">
  <div id="book1" class="book">
    <img src="book.jpg" />
  </div>
  <div id="book2" class="book">
    <img src="book2.jpg" />
  </div>
  <div id="book3" class="book">
    <img src="book3.jpg" />
  </div>
</div>

.csstransforms3d  #book2:before { background-color: #333; }
.csstransforms3d  #book3:before { background-color: #254053; }

I’ll leave you with a live preview (for those viewing in modern versions of Chrome, Safari, or Firefox):

---

Update 5/22/2012: After several requests, I’ve modified this code to support Firefox in addition to Chrome and Safari. In order to do so, I needed to require the use of Modernizr, so that we could detect support for 3D transforms.