How do I flip .html pages with pure CSS3?

I'm lookin开发者_Go百科g 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?

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

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.