3D Pin

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

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