HTML5的页面翻转效果？ [英] Page flip effect for 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?

提前感谢！

推荐答案

这是另一个页面翻转动画使用CSS动画完成该方法是基于 Roman Cortes的灵感源泉。

Here is another page-flip animation done with CSS Animations The methodology is based on Roman Cortes's inspired original.

这样构造的方式是每个右页都是双嵌套在两个div中。内部div围绕外部div中的页面上方的旋转点旋转30度，以便页面进入视图。外部div也围绕相同的旋转点旋转约15度的视图。它配置有一个overflow：hidden，并且作为内部div页面的剪裁容器。 z-indexing用于将页面堆叠在彼此之上。

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.

每个页面都有一个灰度渐变不透明度渐变，它在x轴上缩放

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

这篇关于HTML5的页面翻转效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！