<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); } &: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; }