如何使用纯 CSS3 翻转 .html 页面？答案

【问题标题】：How do I flip .html pages with pure CSS3?如何使用纯 CSS3 翻转 .html 页面？
【发布时间】：2011-05-11 07:51:24
【问题描述】：

我正在寻找没有任何 javascript 的教程 - 纯 CSS3。我为 iPhone 创建了两个页面（page1.html、page2.html），我使用的是 CSS3 和 -webkit-properties。

为了连接这些网站，我创建了一个下一个按钮和一个后退按钮。点击nextbutton时加载page2.html，点击backbutton时加载page1.html。

到目前为止，这是有效的。

我想尝试使用更多的-webkit-properties 来获得类似this demo 的翻转效果。

因此，当单击我的下一个按钮时 page2.html 应该被翻转。当单击/点击后退按钮时 page1.html 应该被翻转。

我是新手，希望在这里得到一些帮助。你知道处理我的问题的教程吗？

我想到的另一个问题是是否可以单独加载 page2.html 或者我是否必须只构建一个包含 page1.html 和 page2.html 内容的页面？

【问题讨论】：

注意：-webkit 属性不是 CSS3 标准的一部分，它们是对 CSS 的私有 Safari 扩展。您应该使用 transform 并仅使用 -webkit-transform 作为后备。
你将如何使用 CSS 处理点击或点击？
@Franci Penov - 感谢您的来信。

【解决方案1】：

互联网上有很多翻页演示。 This is one we did 它的灵感来自 Roman Cortes 一个 - 还有其他人更多地使用挤压而不是翻转。

【讨论】：

【解决方案2】：

您只需构建一个页面，其中包含两个部分/div，其中包含翻转内容。然后你可以使用transform: rotateY ......或者，也许可以使用 AXAJ 或其他东西加载第二页，但因为据我了解它是 CSS，你必须将所有内容放在一个包含两个部分/div 的页面中

【讨论】：