使用 JavaScript 和 CSS 进行类似 iBooks 的翻页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6610302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iBooks-like page flip in JavaScript and CSS?
提问by Akku
Okay, I've googled all the way, hopefully someone here knows a place to point me to.
好吧，我一直在谷歌上搜索，希望这里有人知道一个地方可以指点我。
I'm searching for a page flip animation for JavaScript that comes close to what Apple did with iBooks, for only one page flipping over to reveal only the next page.
我正在寻找 JavaScript 的翻页动画，它与 Apple 对 iBooks 所做的很接近，因为只有一页翻转才能显示下一页。
(EDIT: Maybe my description wasn't clear enough: I'm looking for a page flip effect that transitions one whole usual HTML website, for example imagine this stackoverflow page, to another one, for example the "Add Question" screen by applying a page flip effect, for example when "Ask Question" was clicked. I know this might be a hard-to-realize thing to do, as it involves having the data ready, showing one page, making the transition-effect and then showing the second page while the first page can be released from memory. Nevertheless, with all the HTML5, JS and CSS craze I hoped that someone had made such a transition-effect, and I hope that if there is one out there, someone here knows where to find it. Sadly I suck too much at JS and CSS to get it done myself.)
（编辑：也许我的描述不够清楚：我正在寻找一种页面翻转效果，可以将整个通常的 HTML 网站（例如想象一下这个 stackoverflow 页面）转换为另一个页面，例如通过应用“添加问题”屏幕翻页效果，例如单击“提问”时。我知道这可能是一件难以实现的事情，因为它涉及准备好数据，显示一页，制作过渡效果，然后显示第二页，而第一页可以从内存中释放。不过，随着所有的 HTML5、JS 和 CSS 热潮，我希望有人做出这样的过渡效果，我希望如果有的话，这里有人知道在哪里可以找到它。遗憾的是，我对 JS 和 CSS 太烂了，无法自己完成。）
Here's a nice CSS-only example (always shows two pages width):
这是一个很好的纯 CSS 示例（总是显示两个页面的宽度）：
http://builtbywill.com/code/booklet/
http://builtbywill.com/code/booklet/
And here's another example (that sadly needs to display two pages after it was flipped):
这是另一个示例（遗憾的是需要在翻转后显示两页）：
http://www.romancortes.com/ficheros/page-flip.html
http://www.romancortes.com/ficheros/page-flip.html
I would need that effect to only flip around one page and also just to show the second HTML page after it is flipped. Do you know a library or a ready to use script that does this? I definitely don't want Flash or Silverlight to be a part of the solution.
我需要这种效果来只翻转一页，并且只在翻转后显示第二个 HTML 页面。您是否知道可以执行此操作的库或现成的脚本？我绝对不希望 Flash 或 Silverlight 成为解决方案的一部分。
采纳答案by Pascal Lindelauf
Turn.jsseems to be a good starting point. The code is up on GitHub.
Turn.js似乎是一个很好的起点。代码在 GitHub 上。
回答by RaphaelDDL
This is the nearest i could find with single-page flip like iBooks but still very weird compared to iBooks.
这是我能找到的最接近 iBooks 的单页翻页，但与 iBooks 相比仍然很奇怪。
http://www.jquery.info/spip.php?article78
http://www.jquery.info/spip.php?article78
http://www.jquery.info/scripts/jFlip/demo.html
http://www.jquery.info/scripts/jFlip/demo.html
By the way, i'm trying to achieve something just like you, almost like an 'iBooks clone'.
顺便说一句，我正在努力实现像您一样的东西，几乎就像“iBooks 克隆”一样。
Here is some CSS3 animation, I'm studying it to try make something like (but without 2nd page).
这是一些 CSS3 动画，我正在研究它以尝试制作类似的东西（但没有第二页）。
回答by mhk
回答by mhk
I recently made a pageflip/flipbook effect in pure CSS. The nice thing is that it actually has a nice 3d effect to it. Even though it only works nicely in Google Chrome at the moment, this might be a nice starting point for anybody interested.
我最近用纯 CSS 制作了翻页/翻页书效果。好消息是它实际上具有很好的 3d 效果。尽管目前它只能在 Google Chrome 中很好地工作，但对于任何感兴趣的人来说，这可能是一个很好的起点。
http://dream-world.us/2011/12/05/animated-css3-pageflip-flipbook-with-a-little-jquery/
http://dream-world.us/2011/12/05/animated-css3-pageflip-flipbook-with-a-little-jquery/
The blogpost includes a fiddle, so feel free to play around with the code..
博文包含一个小提琴，所以请随意使用代码。
Cheers
干杯
