如何使用纯 CSS3 翻转 .html 页面?

发布于 2024-10-03 02:21:33 字数 547 浏览 7 评论 0原文

我正在寻找一个没有任何 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

相思故 2024-10-10 02:21:33

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

You 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

吃素的狼 2024-10-10 02:21:33

互联网上有很多翻页演示。 这是我们所做的 它的灵感来自 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文