CSS Only 3D Flip Book Animation

Preview:

Description:

A subtle 3D flip book animation built using CSS3 transitions and transforms.

How to use it:

1. The required HTML structure for the flip book.

<div class="book">
  <!-- For Next/Prev Controls -->
  <input type="checkbox" id="c1">
  <input type="checkbox" id="c2">
  <input type="checkbox" id="c3">
  <!-- Book Cover -->
  <div id="cover">
    <img src="cover.jpg" alt="Cover">
  </div>
  <!-- Pages -->
  <div class="flip-book">
    <!-- Page 1 -->
    <div class="flip" id="p1">
      <div class="back">
        <img src="1.jpg" alt="">
        <label for="c1" class="back-btn">Before</label>
      </div>
      <div class="front">
        <h2>Page 1</h2>
        <label for="c1" class="next-btn">NEXT</label>
      </div>
    </div>
    <!-- Page 2 -->
    <div class="flip" id="p2">
      <div class="back">
        <img src="2.jpg" alt="">
        <label for="c2" class="back-btn">Before</label>
      </div>
      <div class="front">
        <h2>Page 2</h2>
        <label for="c2" class="next-btn">NEXT</label>
      </div>
    </div>
    <!-- Page 3 -->
    <div class="flip" id="p3">
      <div class="back">
        <label for="c3" class="back-btn">Before</label>
      </div>
      <div class="front">
        <h2>Page 3</h2>
        <label for="c3" class="next-btn">NEXT</label>
      </div>
    </div>
  </div>
</div>

2. The necessary CSS/CSS3 styles.

.book {
  display: flex;
}
#cover {
  width: 250px;
  height: 400px;
}
.flip-book {
  width: 250px;
  height: 400px;
  position: relative;
  perspective: 1500px;
}
.flip {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: .5s;
  color: #000;
}
.front {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 13px;
}
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background-color: #000;
}
.next-btn {
  position: absolute;
  bottom: 13px;
  right: 13px;
  cursor: pointer;
  color: #000;
}
.back-btn {
  position: absolute;
  bottom: 13px;
  right: 13px;
  cursor: pointer;
  color: #fff;
}
#p1 {
  z-index: 3;
}
#p2 {
  z-index: 2;
}
#p3 {
  z-index: 1;
}
#c1:checked ~ .flip-book #p1 {
  transform: rotateY(-180deg);
  z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
  transform: rotateY(-180deg);
  z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
  transform: rotateY(-180deg);
  z-index: 3;
}