Door Open Effect
Une porte de 150 × 180 px montée sur charnière à gauche pivote de 110° en 0,6 s et vient vers vous, dévoilant ce qu'elle cachait dans son cadre ; une fois ouverte, on voit son envers. Survol, Tab ou toucher l'ouvrent, sans JavaScript ; sous mouvement réduit, elle s'efface en fondu au lieu de pivoter.
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-0014-root (fond #0a0a0f, 300 px de haut au minimum) centre le cadre .door-container : 150 × 180 px, position: relative, perspective: 1000px et tabindex="0". Dedans, deux blocs se superposent : .door-content, le contenu derrière la porte (fond #1a1a2e, texte #6366f1), puis .door, la porte elle-même (dégradé #6366f1 → #4f46e5), placée au-dessus par z-index: 2. La porte tourne autour de son bord gauche (transform-origin: left center), comme sur ses gonds.
Au survol du cadre, ou quand il a le focus (:focus-within), la porte reçoit rotateY(-110deg) en 0,6 s : elle passe la perpendiculaire vers 0,3 s et s'arrête 20° plus loin, son bord libre venu vers vous. Comme elle s'approche, la perspective l'agrandit : mesurée dans Chromium 151, la porte ouverte occupe 72 px à gauche de la charnière et 210 px de haut, 15 px au-dessus et au-dessous du cadre. Elle n'a pas d'envers masqué : on voit son dos, avec son inscription à l'envers, comme celui d'une vraie porte.
Deux choix tiennent l'effet. Le survol est posé sur le cadre, qui ne bouge pas : sa zone de 150 × 180 px reste stable pendant que la porte tourne, et la porte ouverte, qui en est un enfant, garde le survol si le pointeur passe dessus. Et la porte s'ouvre hors de son cadre, sur la gauche : prévoyez environ 80 px libres de ce côté, sinon elle passe par-dessus l'élément voisin (c'est voulu dans la première scène ci-dessus, où trois portes se suivent dans un couloir).
Accessibilité
- Clavier et toucher : le cadre a
tabindex="0"et la règle:hoverest doublée par:focus-within. Tab ouvre la porte, Tab suivant la referme ; un anneau de 2 px#a5b4fc(:focus-visible) marque le focus au clavier. Au doigt, un toucher l'ouvre, un toucher ailleurs la referme. Mesuré dans Chromium 151, Firefox 153 et WebKit 26. Un clic à la souris donne aussi le focus : la porte reste ouverte jusqu'au clic suivant ailleurs. - Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0014-rootretire la rotation (transform calculé :none) ; la porte s'efface en fondu de 0,3 s et laisse lire ce qu'elle cachait, sans rien qui sorte du cadre. - Ce que la porte cache : seulement à l'écran. Le contenu de
.door-contentest dans le HTML, avant la porte : les lecteurs d'écran le lisent en premier, porte ouverte ou fermée. - Contraste : texte de 16 px en demi-gras. Sur la porte, le blanc mesure 4,47:1 à 6,29:1 ; derrière,
#6366f1sur#1a1a2ene fait que 3,82:1. Prenez#818cf8(5,72:1) ou#a5b4fc(8,56:1) si le contenu caché porte une information.
Compatibilité navigateur
CSS seul (perspective, rotateY, transform-origin, :focus-within, :focus-visible), aucun JavaScript, aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même ouverture, même débord à gauche, deux copies indépendantes sur une page, fondu sans rotation 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 porte reste fermée et couvre son contenu. 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-0014-root">
<div class="demo-3d">
<div class="door-container" tabindex="0">
<div class="door-content">… derrière la porte …</div>
<div class="door">… façade …</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 d'ouverture (CSS — rotateY(-110deg) de la règle de survol) |
−110° | -90deg arrête la porte de profil : on ne voit plus que sa tranche. -70deg l'entrouvre. Au-delà de −130°, elle se rabat vers le mur et déborde davantage. |
Côté de la charnière (CSS — transform-origin et signe de l'angle) |
left center, −110° | Pour une porte qui s'ouvre à droite : transform-origin: right center et rotateY(110deg). Elle vient toujours vers vous et déborde alors du côté droit. |
| Sens d'ouverture (CSS — signe de l'angle) | vers vous | rotateY(110deg) avec la charnière à gauche fait partir la porte dans l'écran : elle rapetisse au lieu de grandir, son débord à gauche est plus court. |
Perspective (CSS — perspective de .door-container) |
1000px | Plus petite, la porte grossit davantage en s'ouvrant et déborde plus. Pour une grande porte (300 px de large), passez à 1 800 px ou plus pour qu'elle reste dans la page. |
Taille et durée (CSS — .door-container, transition de .door) |
150 × 180 px, .6s | La porte et le contenu suivent le cadre (100 %). .9s donne une lourde porte d'armoire, .4s un battant léger. |
Couleurs et anneau de focus (CSS — .door, .door-content, :focus-visible) |
#6366f1 → #4f46e5, #1a1a2e / #6366f1, anneau #a5b4fc | Donnez au contenu un fond nettement plus sombre que la porte : c'est l'ombre de l'intérieur. Sur une page blanche, prenez un anneau foncé. |
FAQ
<span>) avec backface-visibility: hidden et transform: translateZ(1px), et donnez transform-style: preserve-3d à la porte : le texte disparaît au passage de la perpendiculaire et le dos reste de la couleur de la porte. Mesuré dans Chromium et Firefox ; sans translateZ, Firefox garde le texte visible.rotateY(110deg).transform-origin: right center et rotateY(110deg). Les deux battants s'ouvrent vers vous, chacun de son côté. Chaque copie a sa zone de survol : pour ouvrir les deux ensemble, mettez la règle de survol sur un parent commun.
