3D Tilt

La carte se déplace et change légèrement d’échelle en réponse au mouvement du pointeur sur elle.

Ajoute un effet « Wobble Card » sur [où].
Quand le pointeur se déplace sur la carte, celle-ci doit glisser légèrement vers lui tandis que son contenu glisse légèrement dans l’autre sens avec un petit agrandissement, en suivant en douceur, puis tout revient en place quand le pointeur sort.
Garde le mouvement réduit, et désactive-le sur les appareils tactiles et 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.

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.

Le texte pivote en perspective 3D en suivant la position de la souris.

Ajoute un effet « Text Tilt » (aussi appelé perspective text tilt) sur [où].
Le texte doit s’incliner doucement en 3D vers le pointeur quand il bouge, en le suivant avec fluidité, puis revenir à plat en douceur quand le pointeur s’en va.
Garde une inclinaison discrète pour que le texte reste lisible, et laisse-le à 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.