.book-box:hover{.book-3d__inner{animation:book-3d-back 1s ease}}.book-3d{--book-thickness:30px;--cover-color:#d7d7d7;perspective:1000px;margin:30px auto 50px;max-width:500px}.book-3d__inner{position:relative;transform-style:preserve-3d;animation:book-3d 1s ease forwards}@keyframes book-3d{0%{transform:rotateY(0)}to{transform:rotateY(-25deg)}}@keyframes book-3d-back{0%{transform:rotateY(-25deg)}to{transform:rotateY(0)}}.book-3d__inner:before{position:absolute;content:" ";left:100%;top:1%;width:calc(var(--book-thickness) * 2);height:98%;transform:translate(-55%) rotateY(90deg);background:linear-gradient(90deg,#fff,#f0f0f0 5%,#fff 10%,#f0f0f0 15%,#fff 20%,#f0f0f0 25%,#fff 30%,#f0f0f0 35%,#fff 40%,#f0f0f0 45%,#fff 50%,#f0f0f0 55%,#fff 60%,#f0f0f0 65%,#fff 70%,#f0f0f0 75%,#fff 80%,#f0f0f0 85%,#fff 90%,#f0f0f0 95%,#fff)}.book-3d__inner:after{content:"";position:absolute;top:0;left:1%;width:100%;height:100%;transform:translateZ(calc(var(--book-thickness) * -1));background-color:var(--cover-color);border-radius:0 2px 2px 0;box-shadow:-10px 0 50px 10px rgba(0,0,0,.3)}.book-3d__cover{display:block;width:100%;height:auto;border-radius:0 2px 2px 0;transform:translateZ(var(--book-thickness));box-shadow:5px 5px 20px rgba(0,0,0,.1)}