如何使用纯 CSS3 翻转 .html 页面?
我正在寻找一个没有任何 javascript 的教程 - 纯 CSS3。 我已经为 iPhone 创建了两个页面(page1.html、page2.html),并且使用 CSS3 和 -webkit-properties。
为了连接这些站点,我创建了一个下一个按钮和一个后退按钮。 当点击下一个按钮时,加载 page2.html,当点击后退按钮时,加载 page1.html。
到目前为止,这是有效的。
我想尝试使用更多 -webkit-properties 来获得翻转效果,如 this演示。
因此,当单击我的下一个按钮时,应该翻转 page2.html。当单击/点击后退按钮时,应该翻转 page1.html。
我对此很陌生,希望在这里获得一些帮助。您知道解决我的问题的教程吗?
我想到的另一个问题是是否可以单独加载 page2.html 或者我是否必须只构建一个包含 page1.html 和 page2.html 内容的页面?
I'm looking for a tutorial without any javascript - pure CSS3.
I've created two pages (page1.html, page2.html) for the iPhone and I'm using CSS3 and the -webkit-properties.
To connect those sites I created a next- and a backbutton.
When tapping on the nextbutton page2.html is loaded, when tapping on the backbutton page1.html is loaded.
This is working so far.
I'd like to try using some more -webkit-properties to get the flip-effect like in this demo.
So, when clicking on my next-button page2.html should be flipped in. When clicking/tapping on the backbutton page1.html should be flipped in.
I'm new to this and hope to get some help here. Do you know a tutorial dealing with my problem?
Another question coming up to my mind was whether it is possible to load page2.html seperatly or whether I have to build only one page with the content of page1.html and page2.html?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您只需构建一个页面,其中包含两个部分/div,其中包含翻转内容。然后你可以使用
transform:rotateY
...或者,也许使用 AXAJ 或其他东西加载第二页,但因为根据我的理解它是 CSS,所以你必须将所有内容放在一个包含两个部分的页面中/divYou have to build only one page with two sections/divs with the flip-contents in it. Then you can use the
transform: rotateY
… or, maybe load the second page in with AXAJ or something else, but because it's CSS on my understanding you have to put everything in one page with two sections/divs互联网上有很多翻页演示。 这是我们所做的 它的灵感来自 Roman Cortes 之一 - 还有其他更多使用挤压而不是翻转。
There are lots of pageflip demos on the interwebs. This is one we did It was inspired by Roman Cortes one - there are others that use more of a squeeze than a flip.