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 .