Book css

by Pranab Dey

HTML

<div class="main">
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
</div>

CSS

.main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 165px;
}
.page{
  border: 4px solid red;
  width: 30px;
  height: 40px;
  display: inline-block;
  position: absolute;
}
.page:first-child{
  border-left: 0;
  transform: rotate(180deg);
  transform-origin: left;
}
.page:not(:first-child){
  border-left: 0;
}
.page:nth-child(3){
  transform-origin: left;
  animation: pranab 2.5s ease-in-out 0.4s infinite;
}
.page:nth-child(4){
  transform-origin: left;
  animation: pranab 2.5s ease-in-out 0.5s infinite;
}
.page:nth-child(5){
  transform-origin: left;
  animation: pranab 2.5s ease-in-out 0.6s infinite;
}
.page:nth-child(6){
  transform-origin: left;
  animation: pranab 2.5s ease-in-out 0.7s infinite;
}
.page:nth-child(7){
  transform-origin: left;
  animation: pranab 2.5s ease-in-out 0.8s infinite;
}
@keyframes pranab{
  0%{}
  30%{
    transform: rotateY(-180deg);
  }
  100%{
    transform: rotateY(-180deg);
  }
}

JavaScript

var main = document.querySelector(".main");