CSS HTML5的翻页效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4613515/
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
Page flip effect for HTML5?
提问by questor
Hi is it possible to have an effect of flipping a page like a book for HTML5? If so how is it done?
嗨，对于 HTML5，是否可以像翻书一样实现翻页效果？如果是这样，它是如何完成的？
Thanks in advance!
提前致谢！
回答by Michael Mullany
Here is another page-flip animation done with CSS AnimationsUPDATE: REPLACED LINK WITH ARCHIVE.ORG URL. The methodology is based on Roman Cortes's inspired original.
这是另一个使用 CSS AnimationsUPDATE完成的翻页动画：REPLACED LINK WITH ARCHIVE.ORG URL。该方法基于Roman Cortes 的灵感原创.
The way this is constructed is that each right page is double-nested inside two divs. The inner div is rotated by 30 degrees around a rotation point above the page inside an outer div so that the page comes into view. The outer div is also rotated into view around the same rotation point by about 15 degrees. It is configured with an overflow:hidden and acts as a clipping container for the inner div page. z-indexing is used to stack the pages on top of each other.
其构造方式是每个右侧页面都嵌套在两个 div 中。内部 div 围绕外部 div 内页面上方的旋转点旋转 30 度，以便页面进入视图。外部 div 也围绕相同的旋转点旋转了大约 15 度。它配置了一个溢出：隐藏并充当内部 div 页面的剪辑容器。z-indexing 用于将页面堆叠在一起。
Each page is overlaid and underlaid with a grey progressive opacity gradient which is scaled in the x-axis so that the shadow waxes and wanes as the page is turned.
每页都覆盖和下铺有灰色渐进不透明度渐变，该渐变在 x 轴上缩放，以便在翻页时阴影增减。
The code is a little complex but view source is pretty straightforward
代码有点复杂，但查看源代码非常简单
回答by eHussain
You can use the jQuery plugin for page flip effect.
您可以使用 jQuery 插件实现翻页效果。
Below is the link to the plugin of jQuery.
下面是jQuery插件的链接。
http://plugins.jquery.com/plugin-tags/page-flip
http://plugins.jquery.com/plugin-tags/page-flip
You can find demo at http://builtbywill.com/code/booklet/
您可以在http://builtbywill.com/code/booklet/找到演示
Hope this will Help.
希望这会有所帮助。
回答by LiamB
You can use CSS Transformations for this.
您可以为此使用 CSS 转换。
More info : http://www.the-art-of-web.com/css/css-animation/
更多信息：http: //www.the-art-of-web.com/css/css-animation/
Or here (only currently available in Webkit browsers) http://www.romancortes.com/blog/pure-css3-page-flip-effect/
或者在这里（目前仅在 Webkit 浏览器中可用）http://www.romancortes.com/blog/pure-css3-page-flip-effect/
回答by Chris Fowler
turn.jsis a plugin for jQuery that creates a very realistic page turn effect using HTML5, it's a lovely effect and the plugin has been written in such a way that implementing and configuring it is simple and undemanding.
turn.js是一个 jQuery 插件，它使用 HTML5 创建了一个非常逼真的翻页效果，这是一个可爱的效果，并且该插件的编写方式使得实现和配置它简单且不需要太多。
