Flip Book

by Jesse M

HTML

<div class="book">
    <input type="checkbox" id="c1" />
    <input type="checkbox" id="c2" />
    <input type="checkbox" id="c3" />
    <div id="cover">
        <img src="https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg" />
    </div>
    <div class="flip-book">


        <!-- PAGE 1 -->
        <div class="flip" id="p1">
            <div class="back">
              <img src="https://media-cldnry.s-nbcnews.com/image/upload/rockcms/2022-08/220805-border-collie-play-mn-1100-82d2f1.jpg" />
              <label class="back-btn" for="c1">Back</label>
            </div>
            <div class="front">
              <h2>TITLE 1</h2>
              <p>Some text goes here</p>
              <label class="next-btn" for="c1">Next</label>
            </div>
        </div>

        <!-- PAGE 2 -->
        <div class="flip" id="p2">
            <div class="back">
              <img src="https://www.cdc.gov/healthypets/images/pets/cute-dog-headshot.jpg?_=42445" />
              <label class="back-btn" for="c2">Back</label>
            </div>
            <div class="front">
              <h2>TITLE 2</h2>
              <p>Some text goes here</p>
              <label class="next-btn" for="c2">Next</label>
            </div>
        </div>

        <!-- PAGE 3 -->
        <div class="flip" id="p3">
            <div class="back">
              <img src="https://media-cldnry.s-nbcnews.com/image/upload/rockcms/2022-08/220805-border-collie-play-mn-1100-82d2f1.jpg" />
              <label class="back-btn" for="c3">Back</label>
            </div>
            <div class="front">
              <h2>TITLE 3</h2>
              <p>Some text goes here</p>
              <!-- label class="next-btn" for="c3">Next</label -->
            </div>
        </div>


    </div>
</div>

CSS

body {
  margin: 0;
  padding 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #FFF, #4A1010);
}

input {
  display: none;
}

img {
  width: 100%;
  height: 100%;
}

.book {
  display: flex;
}

#cover, .flip-book {
  width: 250px;
  height: 400px;
}

.flip-book {
  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: 1s;
  color: #000;
}

.front, .back {
  border: 1px solid #000;
}

.front {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background: #FFF;
  padding: 0 13px;
  box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5) 0 2px 5px rgba(0, 0, 0, 0.5);
}

.back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: #000;
}

.next-btn, .back-btn {
  position: absolute;
  bottom: 13px;
  right: 13px;
  cursor: pointer;
  color: #000;
}

.back-btn {
  color: #FFF;
}

#p1 {
  z-index: 3;
}

#p2 {
  z-index: 2;
}

#p3 {
  z-index: 1;
}

#c1:checked ~ .flip-book #p1, #c2:checked ~ .flip-book #p2, #c3:checked ~ .flip-book #p3 {
  transform: rotateY(-180deg);
}

#c1:checked ~ .flip-book #p1 {
  z-index: 2;
}

#c2:checked ~ .flip-book #p2 {
  z-index: 2;
}

#c3:checked ~ .flip-book #p3 {
  z-index: 3;
}