Question

以下代码有效，但我不确定如何仅针对单页进行此操作。即。当屏幕上只显示一个页面时，而不是像现在这样显示两个页面。

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

您可以通过进行以下更改将其转换回单页显示动画：

不需要两个div元素（用于页面的正面和背面），因为没有背靠背显示。每个section代表书中的单个页面。 div class='back'可以完全删除。（注意：我还将div class='front'重命名为div class='content'，因为前面并不代表任何内容。
-180deg的旋转通常用于显示元素的背面。由于在单页翻转动画中没有显示背面，因此旋转-90度足以代替旋转-180度。
将更高的z-index添加到元素的翻转和活动状态，以使当前页面之后的页面保持在屏幕上。还会添加opacity: 0以防止它们被显示。
延迟会添加到transition（transition: opacity 0.5s 0.5s中的第二个时间值），以防止opacity在transform完成之前发生变化（从而避免部分黑色）屏幕背面运动）。
当active状态到flipped状态的变化同时发生时，jQuery中的addClass和removeClass会被单个toggleClass调用替换。< / LI>
移动页面的功能调用（对于没有启用触控功能的设备）从页面上的点击移动到使用上一页和下一页按钮。

＆＃13;

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');
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

页面翻转动画 - 仅限单页

1 个答案: