3D & Depth

Des panneaux disposés en anneau tournent autour d’un axe vertical dans l’espace 3D.

Ajoute un carrousel 3D (3D Carousel), aussi appelé rotating ring carousel, sur [où].
Dispose les panneaux en anneau vu en perspective ; chaque appui sur suivant doit faire tourner tout l’anneau en douceur autour de son axe vertical pour amener le panneau suivant devant.
Rends les contrôles accessibles au clavier, annonce le panneau actuel aux lecteurs d’écran et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une Terre 3D en rotation, avec des repères ou des arcs, s’intègre à la mise en page.

Ajoute un « 3D Globe » (aussi appelé interactive globe) sur [où].
Un globe portant quelques repères doit tourner lentement et régulièrement sur son axe, les repères tournant avec lui : calme et continu.
Garde-le décoratif avec une alternative texte pour les informations qu’il montre, mets-le en pause hors écran et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une carte bascule en arrière en perspective au survol, tandis qu’une épingle et un halo s’élèvent vers l’observateur.

Ajoute un effet au survol « 3D Pin » (aussi appelé pin hover 3D) sur [où].
Quand le pointeur est sur la carte, elle doit basculer en arrière en perspective pendant qu’une épingle avec un halo doux à sa base monte de son centre ; tout se remet en place quand le pointeur sort : fluide, sans rebond.
Garde inchangé l’espace de la carte dans la mise en page et applique le même effet au focus clavier.

Une carte pivote en perspective vers le pointeur, et son contenu en couches se détache de la surface.

Ajoute un effet « 3D Tilt » (aussi appelé perspective tilt ou tilt card) sur [où].
La carte doit s’incliner en perspective vers le pointeur quand il bouge, ses couches internes se détachant de la surface à des profondeurs différentes, puis revenir à plat en douceur quand il sort : fluide et discret.
Garde une inclinaison légère pour que le texte reste lisible, et laisse la carte à plat sur les écrans tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une carte fait un demi-tour autour d’un axe pour révéler sa face arrière.

Ajoute un effet « Card Flip » (aussi appelé flip card ou card flip 3D) sur [où].
Quand le pointeur est sur la carte, elle doit se retourner en perspective autour de son axe vertical pour montrer sa face arrière, puis revenir quand il sort : fluide et régulier.
Masque l’envers de chaque face pour qu’elles ne se voient jamais à travers l’une l’autre, et fais fonctionner le retournement au focus clavier et d’un appui sur les écrans tactiles.

Des cartes s’empilent avec de légers décalages et celle du dessus s’écarte pour révéler la suivante.

Ajoute un « Card Stack » (aussi appelé stacked cards) sur [où].
Empile les cartes avec de légers décalages l’une derrière l’autre ; chaque appui doit faire pivoter la carte du dessus sur le côté et la glisser à l’arrière, pendant que les autres avancent : fluide, léger et vif.
Rends-le utilisable au clavier, laisse les lecteurs d’écran atteindre chaque carte dans l’ordre et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément central fait face tandis que les éléments latéraux s’inclinent en perspective.

Ajoute un carrousel « Coverflow » (aussi appelé cover flow carousel) sur [où].
L’élément central doit faire face tandis que ceux de chaque côté se tournent en perspective ; glisser latéralement fait défiler la rangée et, au relâchement, elle se cale en douceur sur l’élément le plus proche.
Prends en charge les flèches du clavier et le balayage en plus du glisser, et garde le défilement vertical de la page sur les écrans tactiles.

Le contenu est placé sur les faces d’un cube qui pivote pour montrer la face suivante.

Ajoute une transition « Cube Rotate » (aussi appelée 3D cube ou cube transition) sur [où].
Place le contenu sur les faces latérales d’un cube vu en perspective ; chaque appui sur suivant doit faire tourner le cube en douceur autour de son axe vertical pour amener la face suivante devant.
Ne rends que la face avant accessible au clavier et aux lecteurs d’écran, et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un reflet lumineux suit le pointeur sur la surface d’une carte, comme une réflexion.

Ajoute un effet « Glare / Holographic Card » (aussi appelé glare card ou glare hover) sur [où].
Un reflet doux et lumineux doit suivre le pointeur sur la surface de la carte, comme de la lumière qui s’y reflète, pendant que la carte s’incline légèrement vers lui ; les deux s’estompent quand il sort : fluide et discret.
Laisse les clics traverser la couche du reflet, garde le contenu lisible en dessous et affiche la carte sans reflet sur les écrans tactiles.