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:

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.

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.