Edit in JSFiddle

<div class="book">
    <!-- 封面 -->
    <div class="book__cover">        
        <div class="book__back"></div>
    </div>
</div>
.book {
    width: 352px;
    height: 224px;
    margin: auto;
    
    &:hover .book__cover {
        -webkit-transform: perspective(1000px) rotateX(70deg) scale(0.85);
    }
}

.book__cover {
    width: 100%;
    height: 100%;
    background: #878787;
    background-size: 100% 100%;
    position: relative;
    transition: all .4s;
    -webkit-transform: perspective(1000px);
    -webkit-transform-origin: bottom;
    -webkit-transform-style: preserve-3d;
}

.book__back {
    width: 100%;
    height: 30px;
    position: absolute;
    left: 0;
    top: 100%;
    background: #4d4e53;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: top;
}