Folding Panel
Un panneau de 200 × 120 px coupé en deux : la moitié haute, comme un rabat, bascule vers vous autour de la ligne centrale en 0,6 s et s'efface à mi-course, découvrant une moitié magenta cachée dessous ; la moitié basse ne bouge pas. Survol, Tab ou toucher le soulèvent, sans JavaScript ; sans rotation (le rabat s'efface en fondu) 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. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0005-root (fond #0a0a0f, 300 px de haut au minimum) centre un cadre .fold-container de 200 × 120 px, avec perspective: 800px et tabindex="0". Dedans, .fold-panel (transform-style: preserve-3d) empile trois blocs en position: absolute. Dans l'ordre du HTML : .fold-reveal, la moitié haute cachée (dégradé #d946ef → #a855f7) ; .fold-top, le rabat qui la couvre (dégradé #6366f1 → #4f46e5), peint par-dessus parce qu'il vient après ; .fold-bottom, la moitié basse fixe (dégradé #4f46e5 → #3730a3).
Le rabat tourne autour de son bord bas (transform-origin: center bottom), c'est-à-dire la ligne centrale du panneau. Au survol du cadre, ou quand il a le focus (:focus-within), il reçoit rotateX(-180deg) en 0,6 s : son bord haut vient vers vous et descend. Il a backface-visibility: hidden ; il disparaît donc dès qu'il dépasse la verticale, vers 0,18 s (181 ms mesurés dans Chromium 151), et finit sa course invisible, couché sur la moitié basse. On voit le rabat se lever vers soi puis s'effacer, et la moitié cachée apparaître à sa place.
Pourquoi l'envers est masqué : sans backface-visibility: hidden, le dos du rabat resterait affiché une fois retourné, couché sur la moitié basse, avec son texte à l'envers par-dessus le texte fixe. Pourquoi le survol est sur le cadre : le rabat change de forme pendant qu'il tourne (il n'est plus qu'un trait à 90°) ; le cadre, lui, garde une zone fixe de 200 × 120 px et le panneau ne se referme pas tant que le pointeur reste dessus.
Accessibilité
- Clavier et toucher : le cadre a
tabindex="0"et la règle:hoverest doublée par:focus-within. Tab soulève le rabat, Tab suivant le referme ; un anneau de 2 px#a5b4fc(:focus-visible) marque le focus au clavier. Au doigt, un toucher le soulève, un toucher ailleurs le referme. Mesuré dans Chromium 151, Firefox 153 et WebKit 26. Un clic à la souris donne aussi le focus : le rabat reste levé jusqu'au clic suivant ailleurs. - Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0005-rootretire la bascule (transform calculé :none) ; le rabat s'efface en fondu de 0,3 s (opacité 0) et laisse lire la moitié cachée. - Ce que le rabat cache : il cache à l'écran, pas dans la page. Le texte de
.fold-revealest dans le HTML, lu en premier par les lecteurs d'écran (il vient avant le rabat) et visible dans le code source. Parfait pour un numéro ou un code qui appartient déjà à la personne qui regarde ; jamais pour une donnée qu'il faut vraiment protéger. - Contraste : texte blanc de 16 px en demi-gras. Rabat : 4,47:1 à 6,29:1 ; moitié basse : 6,29:1 à 9,93:1 ; moitié cachée : 3,46:1 à 3,96:1, sous le seuil de 4,5:1. Foncez la moitié cachée (par exemple
#c026d3→#7c3aed, 4,71:1 et 5,70:1) si elle porte une information.
Compatibilité navigateur
CSS seul (perspective, transform-style: preserve-3d, backface-visibility, :focus-within, :focus-visible), aucun JavaScript, aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même bascule, même disparition à mi-course, deux copies indépendantes sur une page, fondu sans bascule sous mouvement réduit. Le WebKit de Playwright (26.5) aplatit toute 3D CSS, même un cube de référence : focus et toucher y sont mesurés, le rendu 3D n'a pas été vérifié sur un vrai Safari.
Sans transformations 3D, le rabat ne bouge pas et couvre toujours la moitié cachée. Dans Safari avant 15.4, ajoutez -webkit-backface-visibility: hidden au rabat, sinon son dos reste affiché à l'envers sur la moitié basse. Sans :focus-visible, c'est le contour de focus par défaut qui s'affiche.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0005-root">
<div class="demo-3d">
<div class="fold-container" tabindex="0">
<div class="fold-panel">
<div class="fold-reveal">… caché sous le rabat …</div>
<div class="fold-top">… rabat …</div>
<div class="fold-bottom">… moitié fixe …</div>
</div>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille (CSS — width et height de .fold-container) |
200 × 120 px | Les trois blocs font 100 % de large et 50 % de haut : ils suivent le cadre. Au-delà de 300 px de haut, montez aussi la perspective (1 200 px) pour garder une bascule naturelle. |
Perspective (CSS — perspective de .fold-container) |
800px | Plus petite, le bord du rabat grossit davantage en venant vers vous (500px : effet marqué) ; plus grande, la bascule s'aplatit. |
Durée (CSS — transition de .fold-top) |
.6s (courbe ease) | Le rabat disparaît vers 30 % de la durée, quand il passe la verticale. 1s laisse le temps de voir le geste ; .4s fait un dévoilement sec. |
Sens de la bascule (CSS — rotateX(-180deg) de la règle de survol) |
−180° : le rabat vient vers vous | rotateX(180deg) le fait partir vers l'arrière, dans l'écran : un couvercle qui s'ouvre plutôt qu'une étiquette qu'on soulève. |
Hauteur du rabat (CSS — height de .fold-top, .fold-reveal et .fold-bottom) |
50 % chacun | Pour un rabat d'un tiers, mettez 33 % au rabat et à la moitié cachée, 67 % à la partie fixe : le rabat tourne toujours sur son bord bas. |
Couleurs et anneau de focus (CSS — dégradés des trois blocs, :focus-visible) |
#6366f1 → #4f46e5, #d946ef → #a855f7, #4f46e5 → #3730a3, anneau #a5b4fc | Changez librement les dégradés ; gardez la moitié cachée nettement différente du rabat, c'est elle qu'on découvre. Sur une page blanche, prenez un anneau foncé. |
FAQ
backface-visibility: hidden : passé la verticale, c'est son dos qui ferait face à l'écran, et ce dos n'est pas affiché. Sans cette règle, on verrait le rabat couché sur la moitié basse avec son texte à l'envers. Pour un rabat qui se pose visiblement, ajoutez-lui un enfant en position: absolute; inset: 0 tourné de 180° (transform: rotateX(180deg)), avec son propre fond et backface-visibility: hidden, donnez transform-style: preserve-3d au rabat et arrêtez sa course à rotateX(-178deg) : à −180° pile, son dos serait dans le même plan que la moitié basse et passerait dessous (mesuré dans Chromium et Firefox). Son dos vient alors couvrir la moitié basse.
