3D Carousel (carrousel 3D)

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.

Les diapositives défilent horizontalement dans une fenêtre visible et s’aimantent une à une en place.

Ajoute un carrousel (Carousel Slide, aussi appelé slider ou swipe carousel) sur [où].
Chaque étape doit faire glisser la rangée latéralement pour que la diapositive suivante s’aimante au centre, fluide et en ralentissant, avec les voisines qui dépassent sur les bords et les points de position qui suivent.
Avance d’une diapositive à la fois, prends en charge le balayage tactile ainsi que les boutons et les flèches du clavier, et donne des libellés aux contrôles pour les lecteurs d’écran.

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).

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).