如何像书一样翻页

Question

我创建了一个包含4个不同页面的简单网页。在主页上有每个页面的导航链接，如 -

第1页 第2页 第3页 第4页

所以现在我想要实现一些东西，比如我是否会点击它应该打开该页面的任何链接，就像我们翻阅一本带有一些过渡效果的书页。那么如何通过使用html5或css3等来实现这一目标呢？

Answer 1

如前所述，你的问题缺乏一些前调查来得到一些具体的答案，但这里有一些见解可能对你有帮助：

翻转转换

---

使用CSS3 2D变换和剪辑

• 请参阅RománCortés所做的示例：http://www.romancortes.com/blog/pure-css3-page-flip-effect/（仅适用于Chrome - 当只有此浏览器正在使用webkit-前缀处理这些CSS属性时，演示已经很老了）
• div与不同z-index的叠加以及使用CSS3 2D平移/旋转变换（具有改编的起源）在这里完成了大部分工作。添加“box-shadow”和“渐变”以模拟深度。由nlob提供的Hakim El Hattab的方法是一种使用画布来绘制翻转的变体。
• 优点：
  • Light +兼容IE9 +，Firefox 19 +，Chrome 25 +，...
  • 该示例显示了页面的正面和背面
• 不方便：
  • 有点平......

使用CSS3自定义过滤器

• 请参阅Adobe的FilterLab中的示例：http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/（'添加过滤器'＆gt;'自定义'＆gt;'page-curl' - 仅适用于Firefox Aurora并正确设置Chrome Canary - 即启用“CSS着色器“在'关于：标志'）
• 这里的技巧是使用一个非常新的CSS3功能，自定义着色器，它允许您将类似webGL的着色器应用于DOM元素（这里对这些概念的一个很好的介绍：{{ 3）} Paul Lewis）。您可以找到许多资源来实现着色器。例如：
  • HTML5rocks.com - Introduction to Custom Filters (aka CSS Shaders) - 由Lichan Hong，Stuart K. Card和Jindong（JD）Chen撰写的论文
  • Deforming Pages of 3D Electronic Books - Github
• 优点：
  • 真正的3D渲染，可以改变视角，照明......
• 不方便：
  • 新技术 - 目前仅兼容Firefox Aurora和Chrome Canary +对DOM元素的一些限制（请参阅此Adobe's page-curl shader中的示例）

动画＆amp;接口

---

所有这些解决方案都使用CSS transition来创建动画，方法是补间2D变换的属性或着色器的输入属性。

动画可以通过基本的CSS状态（例如:hover）或通过Javascript，通过处理所选事件（点击，拖动......）来触发。例如，您可以使用此处理程序设置DOM元素的类以触发转换：

• CSS：

.page {
    transform: translate(0px, 0px) rotate(0deg);
    transition: transform 1s;
}
.curled-page {
    transform: translate(42px, 42px) rotate(42deg);
}

- JS：

document.getElementById('page1-corner').onclick = function() {
    var page1 = document.getElementById('page1');
    page1.className += ' curled-page'; // Supposing page1 already has "page" as class.
};

---

如果你在所有给出的答案中挖掘一下，你应该能够找到自己的方式。

祝你好运！

Answer 2

您需要了解css和基本javascript事件中的以下属性。

保留3d， 变换起源， 变换旋转， z索引。

并且您不能使用超链接进行导航，因为重新加载页面会影响您对flipeffect的要求。没有人会为您的任务提供整个脚本。您必须自己完成。