Comment retourner des pages .html avec du CSS3 pur?

Question

Je suis à la recherche d'un tutoriel sans javascript - pure CSS3. J'ai créé deux pages (page1.html, page2.html) pour l'iPhone et j'utilise CSS3 et les propriétés -webkit.

Pour connecter ces sites, j'ai créé un bouton suivant et un bouton retour. Lorsque vous appuyez sur le bouton suivant page2.html est chargé, lorsque vous appuyez sur le bouton backpage page1.html est chargé.

Cela fonctionne pour l'instant.

Je voudrais essayer d'utiliser d'autres propriétés -webkit-pour obtenir l'effet de retournement comme dans this demo.

Ainsi, en cliquant sur mon bouton page2.html suivant devrait être basculée en. En cliquant/tapant sur la page1.html de backbutton doit être retournée dans.

Je suis nouveau à cela et espère obtenir de l'aide ici. Connaissez-vous un tutoriel traitant de mon problème? Une autre question qui me vient à l'esprit est de savoir s'il est possible de charger pages2.html séparément ou si je n'ai à construire qu'une seule page avec le contenu de page1.html et page2.html?

Answer 1

Vous devez construire une seule page avec deux sections/divs avec le contenu de la bascule. Ensuite, vous pouvez utiliser le transform: rotateY ... ou, peut-être charger la deuxième page avec AXAJ ou autre chose, mais parce que c'est CSS sur mon arrangement, vous devez mettre tout dans une page avec deux sections/divs

Answer 2

Il y a beaucoup de pageflip démos sur les interwebs. This is one we did Il a été inspiré par Roman Cortes un - il y en a d'autres qui utilisent plus d'un squeeze que d'un flip.