Page flip animation - Single page only

Question

The following code works, but I'm not sure how to make this work for single page only. ie. when only one page is being displayed onscreen instead of two like now.

http://codepen.io/timohausmann/pen/xdKkA

.page {
  cursor: pointer;
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;

  transition: 1.5s transform;
  transform-style: preserve-3d;  
  transform-origin: left center;
}
.front,
.back {
  position: absolute;

  width: 100%;
  height: 100%;
  padding: 10% 5% 5%;
  box-sizing: border-box;

  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.back {
  transform: rotateY(180deg);
}

.page.active {
  z-index: 1;
}
.page.flipped {
  transform: rotateY(-180deg);
}
.page.flipped:last-of-type {
  z-index: 1;
}

Answer 1

You can convert that back to back page display animation into a single page display animation by making the following changes:

• There is no need for two div elements (for front and back sides of the page) because there is no back to back display. Each section would represent a single page in the book. The div class='back' can be removed totally. (Note: I have also renamed the div class='front' to div class='content' because front doesn't mean anything here).
• A rotation by -180deg is generally used to display the backside of the element. Since there is no backside to display in a single page flip animation, a rotation by -90deg is enough instead of a rotation by -180deg.
• A higher z-index is added to the flipped and active states of the element to keep the pages that are after the current page behind on the screen. opacity: 0 is also added to them to prevent them from being visible.
• A delay is added to the transition (second time value in transition: opacity 0.5s 0.5s) to prevent the opacity from changing before the transform is complete (thus avoiding the partly black screen on back movement).
• As the change from active state to flipped state should happen simultaneously, addClass and removeClass in jQuery are replaced with a single toggleClass call.
• The function call to move pages (for devices that don't have touch enabled) is moved from a click on the page to the usage of Previous and Next buttons.

var currentPage = 0;

$('body')
  .on('click', '#next', nextPage)
  .on('click', '#prev', prevPage);

$('.book').hammer().on("swipeleft", nextPage);
$('.book').hammer().on("swiperight", prevPage);

function prevPage() {
  $('.flipped')
    .last()
    .toggleClass('flipped active')
    .siblings('.page')
    .removeClass('active');
}

function nextPage() {
  $('.active')
    .toggleClass('active flipped')
    .next('.page')
    .addClass('active');
}

html {
  height: 100%;
  overflow: hidden;
}
body {
  background: black;
  margin: 0;
  width: 100%;
  height: 100%;
}
h1 {
  text-align: center;
}
.scene {
  width: 90%;
  height: 90%;
  margin: 5% 5% 5% 5%;
  perspective: 1000px;
}
.book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.page {
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s 0.5s;
  transform-style: preserve-3d;
  transform-origin: left center;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10% 5% 5%;
  box-sizing: border-box;
  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.page.active {
  transform: rotateY(0deg);
  transition: 1.5s transform;
  z-index: 1;
}
.page.flipped {
  transform: rotateY(-90deg);
  transition: 1.5s transform;
  z-index: 2;
}
.active ~ .page{
  opacity: 0;
}
p {
  margin: 0 0 0.1em;
  text-indent: 1em;
}
.qr {
  margin: 50px auto;
  max-width: 50%;
}
.qr img {
  display: block;
}
/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .scene {
    width: 90%;
    height: 90%;
    margin: 5%;
  }
}
/* added for the buttons */

#next {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
#prev {
  position: absolute;
  left: 0px;
  bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scene">
  <article class="book">
    <section class="page active">
      <div class="content">
        <h1>Quick iPad Flipping Book Demo</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
        <div class="qr">
          <img src="http://www.qrcode-generator.de/getCode/?cht=qr&chl=http%3A%2F%2Fcodepen.io%2Ftimohausmann%2Ffull%2FxdKkA&chs=180x180&choe=UTF-8&chld=L|0" />qr code for codepen full page</div>
      </div>
    </section>
    <section class="page">
      <div class="content">
        <h1>– 2 –</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
      </div>
    </section>
    <section class="page">
      <div class="content">
        <h1>– 3 –</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
      </div>
    </section>
    <section class="page">
      <div class="content">
        <h1>– 4 –</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
      </div>
    </section>
    <section class="page">
      <div class="content">
        <h1>– 5 –</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
      </div>
    </section>

  </article>
  <button id='next'>Next</button>
  <button id='prev'>Previous</button>
</div>