Libro 3D puro Css

Un libro en 3d en puro css

by kseso

HTML

<!-- Libro en 3d -->
<div class="libro">
  <span class="sombra"></span>
  <img src="http://3.bp.blogspot.com/-zLMPQdYLvDo/T7zOuqlGM8I/AAAAAAAAAok/4kJRErukfQc/s1600/libro1d.jpg" alt="" />
</div>
<p><a href="http://ksesocss.blogspot.com/2012/05/jugando-con-css-libro-en-3d.html">La explicación en el artículo</a></p>

CSS

* {margin:0; padding:0; border: none; position: relative;}
html, body {
 padding: 20px;
}
.libro {
 width: 276px;
 height: 375px;
    -moz-transform: scaleX(0.88) scaleY(0.95);
    -moz-perspective: 150px;
    -moz-perspective-origin: right center;
    
    -webkit-perspective: 150px;
    -webkit-perspective-origin: right center;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: scaleX(0.88) scaleY(0.95);
    
    -o-perspective: 150px;
    -o-perspective-origin: right center;
    -o-transform-style: preserve-3d;
    -o-transform: scaleX(0.88) scaleY(0.95);
    
    -ms-perspective: 150px;
    -ms-perspective-origin: right center;
    -ms-transform-style: preserve-3d; 
    -ms-transform: scaleX(0.88) scaleY(0.95);   
    
    perspective: 150px;
    perspective-origin: right center;
    transform-style: preserve-3d;
    transform: scaleX(0.88) scaleY(0.95);
}
.libro img {
    display: block;
    height: 375px;
    width: 276px;
    position: absolute;
    z-index:5;
    -moz-transform: rotateY(-4deg) translateZ(0px);
    -webkit-transform: rotateY(-4deg) translateZ(0px);
    -o-transform: rotateY(-4deg) translateZ(0px);
    -ms-transform: rotateY(-4deg) translateZ(0px);
    transform: rotateY(-4deg) translateZ(0px);
}

.libro:before, .libro:after {
content: '';
position: absolute;
}

.libro:before {
    height: 100%;
    width: 40px;
    position: absolute;
    right: -25px;
    top: 0%;
    background: #89221B;
    z-index: 2;
    -moz-transform: rotateY(-4deg) translateZ(0px);    
    -webkit-transform: rotateY(-4deg) translateZ(0px);
    -o-transform: rotateY(-4deg) translateZ(0px);    
    -ms-transform: rotateY(-4deg) translateZ(0px);
    transform: rotateY(-4deg) translateZ(0px);
}
.libro:after {
    background: #F5F5F5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 18px 3px 20px rgba(0, 0, 0, 0.25) inset;
    height: 98%;
    width: 30px;
    right: -19px;
    top: 1%;
    z-index: 3;
    -moz-perspective: 5px;
    -moz-transform:...

JavaScript

//no hay