body {
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  background: #ccc;
}

.book {
  transform-style: preserve-3d;
  position: relative;
  height: 355px;
  cursor: pointer;
  backface-visibility: visible;
}

.front, .back, .page1, .page2, .page3, .page4, .page5, .page6 {
  transform-style: preserve-3d;
  z-index: 0;
  position: absolute;
  width: 265px;
  height: 100%;
  top: 0; left: 0;
  transform-origin: left center;
  transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
  padding: 10px;
}

.front, .back {
  background: navy;
  box-shadow: 2px -2px white;
}

.front h1 {
    color: white;
    font-family: initial;
    font-size: -webkit-xxx-large;
    text-align: center;
}

.front, .page1, .page3, .page5 {
  border-bottom-right-radius: .5em;
  border-top-right-radius: .5em;
}

.back, .page2, .page4, .page6 {
  border-bottom-right-radius: .5em;
  border-top-right-radius: .5em;
}

.page1 { 
  background: #efefef;
}

.page2 {
  background: #efefef;
}

.page3 {
  background: #f5f5f5;
}

.page4 {
  background: #f5f5f5;
}

.page5 {
  background: #fafafa;
}

.page6 {
  background: #fdfdfd;
  border-left: solid thin darkblue;
}

#demo:checked + label .front {
  transform: rotateY(-170deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

#demo:checked + label .page1 {
  transform: rotateY(-160deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

#demo:checked + label .page2 {
  transform: rotateY(-22deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

#demo:checked + label .page3 {
  transform: rotateY(-155deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

#demo:checked + label .page4 {
  transform: rotateY(-27deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

#demo:checked + label .page5 {
  transform: rotateY(-150deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

#demo:checked + label .page5 p {
  transform: rotateY(180deg)
}

#demo:checked + label .page6 {
  transform: rotateY(-32deg) scale(1.1);
  box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

#demo:checked + label .back {
  transform: rotateY(-5deg) scale(1.1);
  box-shadow: none;
}