3D hover 效果

by lxjwlt

HTML

<div class="book">
    <!-- 封面 -->
    <div class="book__cover">        
        <div class="book__back"></div>
    </div>
</div>

SCSS

.book {
    width: 352px;
    height: 224px;
    margin: auto;
    
    &:hover .book__cover {
        -webkit-transform: perspective(1000px) rotateX(70deg) scale(0.85);
    }
    &:hover .book__cover:before {
        opacity: 1;
        -webkit-transform: rotateX(0deg) translateZ(-30px) scale(0.52);
    }
}

.book__cover {
    width: 100%;
    height: 100%;
    background: url(http://i1273.photobucket.com/albums/y401/lxjwlt/hover-effect/6efd10c9jw1ducwsufqorj_01_zps2682c027.png) #878787;
    background-size: 100% 100%;
    position: relative;
    transition: all .4s;
    -webkit-transform: perspective(1000px) rotateX(0);
    -webkit-transform-origin: 50% bottom;
    -webkit-transform-style: preserve-3d;
    
    &:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        -webkit-transform: rotateX(88deg) translateZ(-50px) scale(0.54);
        -webkit-transform-origin: bottom;
        transition: all .4s;
        background: rgba(0,0,0, 0.5);
        box-shadow: 0 0 40px 120px rgba(0,0,0, 0.5);
        opacity: 0.2;
    }
}

.book__back {
    width: 100%;
    height: 30px;
    position: absolute;
    left: 0;
    top: 100%;
    background: url(http://i1273.photobucket.com/albums/y401/lxjwlt/hover-effect/6efd10c9jw1ducwsufqorj_04_zps0f6dc2a4.png) #4d4e53;
    background-size: 100% 100%;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: top;
}