Tâche

Créez une carte d'information interactive sur les animaux. Suivez ces étapes pour ajouter des effets dynamiques au survol :

1. Appliquez une perspective de 400px à l'élément parent, un div avec le nom de classe container.

2. Utilisez la fonction translateZ() pour rapprocher la carte (div avec le nom de classe card) de l'utilisateur de 50px.

3. Introduisez une inclinaison le long de l'axe des x de 10deg à la description de la carte (div avec le nom de classe card-description-wrapper).

1. Pour le conteneur parent (div avec le nom de classe container), définissez la propriété perspective à 400px pour créer un espace 3D pour les transformations de la carte.

2. Pour rapprocher la carte (div avec le nom de classe card) de l'utilisateur, utilisez la fonction translateZ() avec une valeur de 50px. Cela simulera le déplacement de la carte vers l'avant dans l'espace 3D.

3. Appliquez un effet de déformation le long de l'axe des x à la description de la carte (div avec le nom de classe card-description-wrapper) en utilisant la propriété transform avec la fonction skewX() et une valeur de 10deg.