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

Question

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

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

到目前为止这是有效的。

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

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

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

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

Answer 1

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

Answer 2

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