CSS Book

by lovromar

HTML

<div class="book">
    <div class="cover"></div>
</div>

CSS

body {
    padding: 50px;
}
.book {
    background-color: #f6f6f6;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
                0 0 0 1px hsla(0,0%,0%,.1),
                0 2px 3px hsla(0,0%,0%,.1),
                0 4px 3px hsla(0,0%,0%,.05),
                0 6px 6px hsla(0,0%,0%,.05);
    height: 150px;
    margin-left: 100px;
    width: 100px;
    -webkit-transform: perspective(1000px);
    -webkit-transform-style: preserve-3d;
}
.cover {
    background-color: #fff;
    background-image: url('http://www.supplychainmovement.com/wp-content/uploads/2010/10/Book-cover-Operations-Rules-100x150.jpg');
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.25)
                0 0 0 1px hsla(0,0%,0%,.1),
                0 2px 3px hsla(0,0%,0%,.1),
                0 4px 3px hsla(0,0%,0%,.05),
                0 6px 6px hsla(0,0%,0%,.05);
    height: 100%;
    position: relative;
    width: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: .5s;
}
.cover:after {
    background-color: #fff;
    bottom: 0;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
                inset 0 2px 0 hsla(0,0%,100%,.25),
                0 0 0 1px hsla(0,0%,0%,.1),
                0 2px 3px hsla(0,0%,0%,.1),
                0 4px 3px hsla(0,0%,0%,.05),
                0 6px 6px hsla(0,0%,0%,.05);
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -10;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
}
.book:hover .cover {
    -webkit-transform: rotateY(-180deg);
}