Fold Effect Card
Une carte de 200 × 160 px coupée en deux moitiés qui pivotent de 30° autour de la ligne centrale en 0,5 s : leurs bords extérieurs avancent vers vous, la carte se creuse en V comme une feuille qu'on marque d'un pli. Survol, Tab ou toucher la plient, sans JavaScript ; sous mouvement réduit, une ombre le long du pli remplace le mouvement.
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-0013-root (fond #0a0a0f, 300 px de haut au minimum) centre la carte .fold-card : 200 × 160 px, position: relative, perspective: 1000px et tabindex="0". Ses deux moitiés de 80 px sont en position: absolute : .fold-top en haut (dégradé #6366f1 → #8b5cf6), .fold-bottom en bas (#8b5cf6 → #d946ef). La première tourne sur son bord bas (transform-origin: center bottom), la seconde sur son bord haut (center top) : les deux charnières se rejoignent sur la ligne centrale.
Au survol de la carte, ou quand elle a le focus (:focus-within), la moitié haute reçoit rotateX(-30deg) et la moitié basse rotateX(30deg), en 0,5 s. Les deux bords extérieurs avancent de 40 px vers vous (80 px × sin 30°) pendant que le pli reste en place : la carte se creuse en V. Mesuré dans Chromium 151 et Firefox 153 : chaque moitié passe de 80 à 72 px de haut à l'écran et son bord extérieur s'élargit de 200 à 208 px, la perspective agrandissant ce qui s'approche. Le mouvement est fini en 0,4 s environ.
Pourquoi la carte porte sa propre hauteur et position: relative : les moitiés sont en position: absolute, elles se placent donc par rapport au plus proche parent positionné. C'est la carte qui doit jouer ce rôle, avec une hauteur égale aux deux moitiés : « haut » reste en haut, « bas » en bas, et la zone qui reçoit le survol couvre toute la carte (200 × 160 px). Le survol est sur la carte et pas sur les moitiés, pour que le pointeur ne quitte pas la zone quand les moitiés changent de forme.
Accessibilité
- Clavier et toucher : la carte a
tabindex="0"et chaque règle:hoverest doublée par:focus-within. Tab la plie, Tab suivant la déplie ; un anneau de 2 px#a5b4fc(:focus-visible) marque le focus au clavier. Au doigt, un toucher la plie, un toucher ailleurs la déplie. Mesuré dans Chromium 151, Firefox 153 et WebKit 26. Un clic à la souris donne aussi le focus : la carte reste pliée jusqu'au clic suivant ailleurs. - Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0013-rootretire la rotation des deux moitiés (transform calculé :none) ; une ombre intérieure apparaît en fondu de 0,3 s de part et d'autre de la ligne centrale et marque le pli sans mouvement. - Contenu : le pli ne cache rien. Les deux moitiés restent lisibles, dans l'ordre du HTML (haut puis bas), pour les lecteurs d'écran comme à l'écran ; à 30°, le texte est à peine raccourci (72 px de haut au lieu de 80).
- Contraste : texte blanc de 16 px en demi-gras. Moitié haute : 4,47:1 à 4,23:1 ; moitié basse : 4,23:1 à 3,46:1, sous le seuil de 4,5:1 vers le magenta. Foncez la fin du dégradé bas (par exemple
#c026d3, 4,71:1) si la carte porte une information.
Compatibilité navigateur
CSS seul (perspective, rotateX, transform-origin, backface-visibility, :focus-within, :focus-visible), aucun JavaScript, aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même pli, mêmes tailles à l'écran, deux copies indépendantes sur une page, ombre sans mouvement 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, la carte reste plate : les deux moitiés restent lisibles l'une au-dessus de l'autre, rien n'est perdu. Sans :focus-visible, c'est le contour de focus par défaut du navigateur qui s'affiche.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0013-root">
<div class="demo-3d">
<div class="fold-card" tabindex="0">
<div class="fold-top">… moitié haute …</div>
<div class="fold-bottom">… moitié basse …</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 |
|---|---|---|
Angle du pli (CSS — rotateX(-30deg) et rotateX(30deg) des règles de survol) |
30° | Gardez deux valeurs opposées. 15° donne un pli à peine marqué, 60° une carte presque refermée vers vous (les moitiés tombent à environ 40 px de haut à l'écran). Au-delà de 90°, l'envers masqué fait disparaître les moitiés. |
| Sens du pli (CSS — signes des deux angles) | haut −30°, bas +30° : bords vers vous | Inversez les signes (haut 30deg, bas -30deg) : les bords partent vers l'arrière et c'est la ligne centrale qui paraît en avant, comme une carte de vœux posée ouverte. |
Perspective (CSS — perspective de .fold-card) |
1000px | Plus petite, le V se lit mieux : 500 px sur une carte de 150 px de haut, 420 px sur un carton de 120 px. Plus grande, le pli devient presque invisible de face. |
Taille (CSS — width et height de .fold-card, height des deux moitiés) |
200 × 160 px, moitiés de 80 px | La hauteur de la carte doit rester le double de celle d'une moitié : changez les deux ensemble, sinon une bande vide apparaît au milieu ou les moitiés se chevauchent. |
Durée (CSS — transition des deux moitiés) |
.5s (courbe ease) | .3s donne un pli vif, .8s un papier lourd. Gardez la même durée sur les deux moitiés pour un V symétrique. |
Couleurs et anneau de focus (CSS — dégradés de .fold-top et .fold-bottom, :focus-visible) |
#6366f1 → #8b5cf6, #8b5cf6 → #d946ef, anneau #a5b4fc | Le dégradé qui se prolonge d'une moitié à l'autre fait lire une seule feuille. Deux couleurs franches donnent plutôt deux volets. Sur une page blanche, prenez un anneau foncé. |
FAQ
left: 0 et right: 0, 50 % de large chacune, toute la hauteur), donnez transform-origin: right center à la moitié gauche et left center à la droite, et remplacez les rotations par rotateY(30deg) à gauche et rotateY(-30deg) à droite. Les bords extérieurs avanceront de la même façon, comme un livre entrouvert.position: absolute : elles ne donnent aucune hauteur à la carte. La carte porte donc elle-même 160 px et position: relative, pour que les moitiés se placent dans son cadre et que la zone de survol couvre tout. Si le texte d'une moitié s'allonge, augmentez la hauteur des moitiés et de la carte ensemble.
