How to create book flip animation CSS

In this article, we will create a book flip animation using HTML, CSS, and Javascript.

This animation can be great for a book-related website. Users will love this type of engaging animation.

Also Read – Animated Expanding Button

Output

First here is the output

See the Pen Book page flip animation by Pizzabote (@pizzabote) on CodePen.

Step 1

First, we will start by writing the HTML structure of our page

<div class="container">
  <div class="page" id="first">
    <div class="back">
      <div class="outer">
        <div class="content">
          <img
            src="https://tympanus.net/Development/BookBlock/images/demo1/1.jpg"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="page" id="second">
    <div class="front">
      <div class="outer">
        <div class="content">
          <img
            src="https://tympanus.net/Development/BookBlock/images/demo1/1.jpg"
          />
        </div>
      </div>
    </div>
    <div class="back" id="third">
      <div class="outer">
        <div class="content">
          <div class="helper-class-to-make-bug-visbile">
            <img
              src="https://tympanus.net/Development/BookBlock/images/demo1/2.jpg"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="page" id="fourth">
    <div class="front">
      <div class="outer">
        <div class="content">
          <img
            src="https://tympanus.net/Development/BookBlock/images/demo1/2.jpg"
          />
        </div>
      </div>
    </div>
  </div>

  <div id="prev"></div>
  <div id="next"></div>
</div>

Now, that we have a basic structure let’s add some CSS to it

Step 2

For, now you can follow along with me by copying the below code.

body {
  margin: 4em;
}

.container {
  width: 400px;
  height: 300px;
  position: relative;

  z-index: 100;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.page {
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;

  width: 50%;
  height: 100%;
  left: 50%;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

#first,
#first .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#first {
  z-index: 102;
}
#second {
  z-index: 103;
  transition: transform 0.8s ease-in-out;
}
#third .content {
  width: 400px;
}
#fourth {
  z-index: 101;
}

.page > div,
.outer,
.content,
.helper-class-to-make-bug-visbile {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.page > div {
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.back {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.outer {
  width: 100%;
  overflow: hidden;
  z-index: 999;
}

/* problematic class: `.content` */
.content {
  width: 200%;
  background: red;
}

.front .content {
  left: -100%;
}

/* controls */
#prev,
#next {
  position: absolute;
  width: 50%;
  height: 100%;
  z-index: 999;
}
#prev:hover,
#next:hover {
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
#prev {
  top: 0;
  left: 0;
}
#next {
  top: 0;
  left: 50%;
}

Step 3

Finally, we need to add functionality to it by writing some javascript to it.

let prev = document.getElementById("prev");
let next = document.getElementById("next");

prev.addEventListener("click", prevImg);
next.addEventListener("click", nextImg);

let second = document.getElementById("second");

function prevImg() {
  second.style.msTransform = "rotateY(0deg)";
  second.style.webkitTransform = "rotateY(0deg)";
  second.style.transform = "rotateY(0deg)";
}
function nextImg() {
  second.style.msTransform = "rotateY(-180deg)";
  second.style.webkitTransform = "rotateY(-180deg)";
  second.style.transform = "rotateY(-180deg)";
}

There you have it.

This cool project is available on Codepen and you can go there by clicking here.