HTML5的页面翻转效果？

Question

嗨是否有可能像HTML5的书一样翻页？如果是这样怎么办？

提前致谢!

Answer 1

这是另一个用CSS动画更新完成的页面翻转动画:LINK BROKEN.该方法基于Roman Cortes的灵感原创.

构造它的方式是每个右页都嵌套在两个div中.内部div围绕外部div内的页面上方的旋转点旋转30度,以便页面进入视图.外部div也围绕相同的旋转点旋转约15度.它配置了overflow:hidden并充当内部div页面的剪切容器.z-indexing用于将页面堆叠在彼此之上.

每个页面都覆盖并镶嵌有灰色渐进不透明度渐变,该渐变在x轴上缩放,以便在页面转动时阴影会变蜡和减弱.

代码有点复杂但查看源代码非常简单

Answer 2

您可以使用jQuery插件进行页面翻转效果.

下面是jQuery插件的链接.

http://plugins.jquery.com/plugin-tags/page-flip

您可以在http://builtbywill.com/code/booklet/找到演示

希望这会有所帮助.

Answer 3

您可以使用CSS转换.

更多信息:http://www.the-art-of-web.com/css/css-animation/

或者在这里(目前仅在Webkit浏览器中可用)http://www.romancortes.com/blog/pure-css3-page-flip-effect/