.book-container{display:flex;align-items:center;justify-content:center;perspective:600px}@keyframes initAnimation{0%{transform:rotateY(0deg)}to{transform:rotateY(-30deg)}}.book{width:200px;height:300px;position:relative;transform-style:preserve-3d;transform:rotateY(-30deg);transition:1s ease;animation:initAnimation 1s ease 0s 1}.book-container:focus .book,.book-container:hover .book{transform:rotateY(0deg)}.book>:first-child{position:absolute;top:0;left:0;background-color:red;width:200px;height:300px;transform:translateZ(15px);background-color:#01060f;border-radius:0 2px 2px 0;box-shadow:5px 5px 20px #666}.book:before{background-color:blue;top:1px;width:28px;height:298px;transform:translateX(184px) rotateY(90deg);background:linear-gradient(90deg,#fff,#f9f9f9 5%,#fff 10%,#f9f9f9 15%,#fff 20%,#f9f9f9 25%,#fff 30%,#f9f9f9 35%,#fff 40%,#f9f9f9 45%,#fff 50%,#f9f9f9 55%,#fff 60%,#f9f9f9 65%,#fff 70%,#f9f9f9 75%,#fff 80%,#f9f9f9 85%,#fff 90%,#f9f9f9 95%,#fff)}.book:after,.book:before{position:absolute;content:" ";left:0}.book:after{top:0;width:200px;height:300px;transform:translateZ(-15px);background-color:#01060f;border-radius:0 2px 2px 0;box-shadow:-10px 0 50px 10px #666}@media (max-width:768px){.book{animation:initAnimation 3s ease 0s infinite;animation-direction:alternate}}