我创建了一个包含 4 个不同页面的简单网页。在主页上，每个页面都有一个导航链接，例如 -
第1页 第2页 第3页 第4页
所以现在我想实现一些东西，比如如果我点击任何链接，它应该打开那个页面，就像我们翻阅带有一些过渡效果的书页一样。那么如何通过使用 html5 或 css3 等来实现呢？
问问题
7053 次
2 回答
5
正如已经说过的那样，您的问题缺乏一些以前的调查来获得一些具体的答案，但这里有一些可能对您有所帮助的见解：
翻转变换
使用 CSS3 2D 变换和裁剪
- 请参阅 Román Cortés 制作的示例：http ://www.romancortes.com/blog/pure-css3-page-flip-effect/ （仅适用于 Chrome - 该演示非常陈旧，当时只有该浏览器处理那些 CSS属性，带
webkit-前缀） div不同 z-index的叠加和 CSS3 2D 平移/旋转变换（具有适应的原点）的使用在这里完成了大部分技巧。添加了“box-shadow”和“gradient”来模拟深度。Hakim El Hattab 的方法，由 nlob 提出，是一种使用画布代替绘制翻转的变体。- 优点：
- Light + 兼容 IE9+、Firefox 19+、Chrome 25+、...
- 该示例显示页面的正面和背面
- 不方便：
- 有点平...
使用 CSS3 自定义过滤器
- 请参阅 Adobe 的 FilterLab 中的示例：http: //html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/（“添加过滤器”>“自定义”>“页面卷曲”-仅适用于 Firefox Aurora 并正确设置Chrome Canary - 即通过在“about:flags”中启用“CSS Shaders”）
- 这里的技巧是使用一个全新的 CSS3 功能，自定义着色器，它允许您将类似 webGL 的着色器应用到您的 DOM 元素（这里对这些概念进行了很好的介绍：HTML5rocks.com - 自定义过滤器简介（又名 CSS 着色器） ）由保罗刘易斯）。您可以找到许多资源来实现着色器。例如：
- 3D 电子书的变形页面- Lichan Hong、Stuart K. Card 和 Jindong (JD) Chen 的论文
- Adobe 的页面卷曲着色器- Github
- 优点：
- 真正的 3D 渲染，可以改变视角、照明、......
- 不方便：
- 新技术 - 目前仅与 Firefox Aurora 和 Chrome Canary 兼容 + 对 DOM 元素的一些限制（参见另一个线程中的示例）
动画和界面
所有这些解决方案都使用 CSStransition来创建动画，通过补间 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.
};
如果您在所有给出的答案中挖掘一点，您应该能够找到自己的方式。
祝你好运！
于 2013-05-29T12:58:31.497 回答
1
您需要了解 css 和基本 javascript 事件中的以下属性。
保留 3d、变换原点、变换旋转、z-index。
而且您不能使用超链接进行导航，因为重新加载页面会与您对翻转效果的要求相冲突。没有人会为您的任务提供整个脚本。您必须自己做。
于 2013-05-28T18:06:40.713 回答