3D CSS Book Covers (WebKit and Firefox)

gistfile1.html

<!-- Note: You'll have to use Modernizr to detect 3d transform support -->

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

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

  .book img { vertical-align: middle; }

  /*
   *  I'd recommend using Modernized to detect 3d transform support
   *  then add a "supports-transform-3d" class 
   */

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

  .supports-transform-3d .book {
    position: relative;
    -moz-perspective: 100px;
    -moz-transform: rotateY(-3deg);
    -webkit-transform: perspective(100) rotateY(-3deg);
    box-shadow: none;
    margin: 0;
  }

  .supports-transform-3d .book img {
    position: relative;
    max-width: 100%;
  }

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

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

  .supports-transform-3d .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);
  }

  .supports-transform-3d #book2:before { background-color: #333; }
  .supports-transform-3d #book3:before { background-color: #254053; }
</style>

This isn't agnostic of the size of the image. Depends heavily on the image being tiny.