Page Turn
Vrai tournage de page : la page A pivote de −160° autour de son bord gauche, dans une perspective de 1 200 px, avec son ombre et la tranche du livre, et découvre la page B posée dessous ; le second appui la ramène. CSS + 0,9 Ko de JavaScript, page d'arrivée directe si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le conteneur .pageturn-container (240 × 200 px) porte la perspective (perspective: 1200px). Les deux pages .pageturn-page y sont superposées en inset: 0, coins arrondis du côté libre seulement (4px 16px 16px 4px), avec transform-origin: left center : elles tournent autour de leur bord gauche, la reliure. La page A est au-dessus (z-index: 2) et projette une ombre vers la droite ; la page B attend dessous (z-index: 1). Une bande .pageturn-spine de 4 px, au-dessus des deux, dessine la tranche.
Au basculement de .active, A tourne à rotateY(-160deg) en 0,9 s (cubic-bezier(.4, 0, .2, 1)). La perspective fait grandir le bord libre quand il vient vers l'œil, puis la page passe de profil, vers −84°, et cesse d'être dessinée : backface-visibility: hidden masque son revers, et la règle .active la passe aussi en visibility: hidden avec un délai de 0,32 s, l'instant où elle est de profil, pour les moteurs qui n'appliquent pas la première (c'est le cas du WebKit de test). B apparaît alors en entier. B, elle, ne bouge pas. Mesuré dans Chromium 151 : 250 ms après le clic, la page A ne couvre plus que 177 px de large à l'écran (189 px dans Firefox 153) ; à 1,1 s elle est à −160° et l'état tient trois secondes plus tard. Contrôle par capture d'écran sur toute la largeur dans Chromium, Firefox et WebKit 26.5 : B seule après le clic, rien à gauche de la reliure, puis de nouveau A après le second clic, qui ramène la page par-dessus (elle redevient visible à 0,32 s, de profil).
Passé 90°, la page n'est plus dessinée : l'angle d'arrivée (−160°) ne change donc pas l'image finale, il règle le trajet, c'est-à-dire la vitesse à laquelle la page se soulève puis disparaît de profil. Le script pose ou retire .active au clic, à Entrée ou à Espace sur chaque .pageturn-container de la page, tient aria-pressed à jour et passe aria-hidden à la page couverte ; tout est préfixé pageturn-, rien n'est exposé sur window. Une variante plus simple, qui fait pivoter un panneau de couleur, existe aussi dans la catégorie.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la rotation est retirée et la page suivante s'affiche aussitôt (mesuré à 60 ms dans Chromium et Firefox : page A déjà à −160°). - Clavier et lecteurs d'écran : le conteneur porte
role="button",tabindex="0"etaria-pressed; Entrée et Espace tournent la page comme un clic (mesuré). La page couverte reçoitaria-hidden="true": seule la page visible est lue. Contour de 2 px au focus clavier. - Livre de plusieurs pages : donnez des boutons « Page précédente » et « Page suivante » explicites et annoncez le numéro de page (zone
aria-live="polite") ; une page qui tourne ne dit pas où l'on est. - Texte des pages : il pivote avec la page et devient illisible dès qu'elle se soulève ; c'est voulu, mais n'y mettez pas d'information à lire pendant le geste.
Compatibilité navigateur
CSS (perspective, rotateY, transform-origin, backface-visibility avec préfixe -webkit-, visibility à délai, inset) + 0,9 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : page tournée, page B seule visible, vérifiée par capture d'écran sur toute la largeur (aucun revers en miroir, WebKit compris), état B tenu, retour au second clic ; clavier et mouvement réduit mesurés dans Chromium et Firefox. Chaque page tourne seule dans la perspective de son parent, sans preserve-3d : c'est la forme de 3D la plus largement prise en charge. inset fixe le plancher (Chrome 87, Firefox 66, Safari 14.1).
Sans JavaScript, la page A reste affichée. Dans un moteur qui ignore backface-visibility, la bascule de visibility cache quand même la page tournée : son revers en miroir n'apparaît pas à gauche de la reliure.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="pageturn-stage">
<div class="pageturn-container" role="button" tabindex="0" aria-pressed="false">
<div class="pageturn-spine"></div>
<div class="pageturn-page pageturn-page-b" aria-hidden="true">…</div>
<div class="pageturn-page pageturn-page-a">…</div>
</div>
<span class="pageturn-hint">…</span>
</div>Le code complet HTML + CSS + JS de Page Turn, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Angle d'arrivée (CSS — rotateY(-160deg)) |
−160° | L'angle ne change que le trajet : passé 90°, la page n'est plus dessinée, donc −120°, −160° et −175° donnent la même image finale ; plus l'angle est grand, plus vite la page passe de profil. Pour une page à peine soulevée qui laisse voir B en partie, réglez entre −30° et −60° et retirez visibility: hidden de la règle .active. Pour un autre angle au-delà de 90°, recalez le délai de visibility (0,32 s) sur l'instant où la page passe de profil. |
Perspective (CSS — perspective du conteneur) |
1 200 px | 800 px rend le bord libre plus spectaculaire en venant vers l'œil ; 2 000 px donne un tournage presque plat, discret. |
Durée et courbe (CSS — transition de .pageturn-page et .pageturn-page-a) |
0,9 s, cubic-bezier(.4, 0, .2, 1) |
0,6 s pour feuilleter vite ; cubic-bezier(.3, .1, .3, 1) soulève la page lentement puis la laisse tomber. Le délai de visibility (0,32 s) suit la durée : passez-le à 0,21 s pour 0,6 s. |
Ombre de la page (CSS — box-shadow de .pageturn-page-a) |
rgba(0, 0, 0, .3) 5px 0 20px |
Elle donne l'épaisseur du papier sur la page du dessous ; augmentez le flou à 30 px pour un papier épais, retirez-la pour un rendu plat. |
Tranche (CSS — .pageturn-spine) |
4 px de blanc à 8 % | Un dégradé de noir vers transparent sur 6 px imite le creux de la reliure d'un livre ouvert. |
FAQ
z-index décroissant). Chaque clic tourne la page du dessus encore à plat (classe is-turned qui applique rotateY(-160deg)) ; le retour retire la classe de la dernière page tournée. Remontez le z-index d'une page pendant qu'elle tourne pour qu'elle passe au-dessus des autres.backface-visibility: hidden masque son revers, et visibility: hidden, appliquée avec un délai de 0,32 s quand la page passe de profil, prend le relais dans les moteurs qui ignorent la première (dans WebKit 26.5, sans cette bascule, le revers resterait visible en miroir à gauche de la reliure). C'est ce qui découvre B sans JavaScript supplémentaire. Pour afficher un verso (page de gauche d'un livre ouvert), il faut une face arrière dans la page et transform-style: preserve-3d, comme une carte à deux faces, et retirer la bascule de visibility.pointermove, convertissez le déplacement horizontal en angle (0 à −160°) écrit dans style.transform sans transition, puis au relâchement posez ou retirez .active selon que la page a dépassé −80°.
