下面的代码可以工作，但我不确定如何使它只适用于单页。例如，当屏幕上只显示一页而不是像现在这样显示两页时。
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;
}
最佳答案
通过进行以下更改，可以将该背对背页显示动画转换为单页显示动画：
不需要两个div元素（用于页面的正面和背面），因为没有背对背显示。每个section代表书中的一页。div class='back'可以完全移除。（注意：我还将div class='front'重命名为div class='content'，因为front在这里没有任何意义）。
旋转-180度通常用于显示元素的背面。由于在单页翻转动画中没有可显示的背面，因此旋转-90度就足够了，而不是旋转-180度。
在元素的翻转和活动状态中添加一个更高的z-index，以将当前页面后面的页面保留在屏幕上。opacity: 0也会添加到它们中，以防止它们可见。
在transition中添加一个延迟（第二时间值在transition: opacity 0.5s 0.5s中），以防止opacity在transform完成之前发生变化（从而避免了部分黑屏的后移）。
由于从active状态到flipped状态的变化应该同时发生，jQuery中的addClass和removeClass被一个toggleClass调用替换。
移动页面的功能调用（对于未启用触摸功能的设备）从单击页面移动到使用“上一步”和“下一步”按钮。
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>关于javascript - 翻页动画-仅单页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31364296/