HTML5的翻页效果？
您好，HTML5 是否可以实现像书一样翻页的效果？如果是这样，它是如何完成的？
提前致谢！
Hi is it possible to have an effect of flipping a page like a book for HTML5? If so how is it done?
Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这是另一个 翻页动画使用 CSS 动画完成 更新：用 ARCHIVE.ORG URL 替换链接。该方法基于Roman Cortes 的原创作品。
其构造方式是每个右页双重嵌套在两个 div 内。内部 div 围绕外部 div 内部页面上方的旋转点旋转 30 度，以便页面进入视图。外部 div 也围绕同一旋转点旋转约 15 度进入视图。它配置了一个overflow:hidden，并充当内部div页面的剪切容器。 z 索引用于将页面堆叠在一起。
每个页面都覆盖有灰色渐进不透明度渐变，该渐变在 x 轴上缩放，以便随着页面的翻动，阴影会逐渐增强和减弱。
代码有点复杂，但是查看源代码非常简单
Here is another page-flip animation done with CSS Animations UPDATE: REPLACED LINK WITH ARCHIVE.ORG URL. The methodology is based on Roman Cortes's inspired original.
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.
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.
The code is a little complex but view source is pretty straightforward
您可以使用 jQuery 插件实现翻页效果。
下面是 jQuery 插件的链接。
http://plugins.jquery.com/plugin-tags/page-flip
您可以在 http://builtbywill.com/code/booklet/ 找到演示，
希望这会有所帮助。
You can use the jQuery plugin for page flip effect.
Below is the link to the plugin of jQuery.
http://plugins.jquery.com/plugin-tags/page-flip
You can find demo at http://builtbywill.com/code/booklet/
Hope this will Help.
您可以为此使用 CSS 转换。
更多信息：http://www.the-art-of-web.com/css/ css-animation/
或者在这里（目前仅在 Webkit 浏览器中可用）http:// /www.romancortes.com/blog/pure-css3-page-flip-effect/
You can use CSS Transformations for this.
More info : 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/
turn.js 是一个 jQuery 插件，它使用 HTML5 创建非常逼真的翻页效果，这是一个可爱的效果，该插件的编写方式使其实现和配置非常简单且要求不高。
turn.js is 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.