.book-container{display:flex;position:absolute;align-items:center;justify-content:center;perspective:800px}@keyframes initAnimation{0%{transform:rotateY(0deg)}to{transform:rotateY(-30deg)}}.book{width:200px;height:300px;position:relative;transform-style:preserve-3d;transform:rotateY(-29deg);transition:1s ease;animation:initAnimation 1s ease 0s 1;-webkit-transform:rotateY(-29deg);-moz-transform:rotateY(-29deg);-ms-transform:rotateY(-29deg);-o-transform:rotateY(-29deg);-webkit-animation:initAnimation 1s ease 0s 1}.book:hover{transform:rotateY(0deg)}.book>:first-child{position:absolute;top:0;left:0;background-color:red;width:200px;height:300px;transform:translateZ(40px);background-color:#011131;border-radius:0 2px 2px 0;box-shadow:5px 5px 20px #666}.book:before{background-color:blue;top:3px;width:56px;height:294px;transform:translateX(161px) 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(-25px);background-color:#011131;border-radius:0 2px 2px 0;box-shadow:-10px 0 50px 10px #666}