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

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL3RyYW5zZm9ybWF0aW9ucytzZWN0aW9uL2hpcHBvLWNoYWxsZW5nZStpbWFnZS5wbmciCiAgICAgICAgICBhbHQ9ImhpcHBvIgogICAgICAgICAgd2lkdGg9IjEwMHB4IgogICAgICAgIC8+CiAgICAgICAgPGRpdiBjbGFzcz0iY2FyZC1kZXNjcmlwdGlvbi13cmFwcGVyIj4KICAgICAgICAgIDxoMyBjbGFzcz0iY2FyZC10aXRsZSI+SGlwcG88L2gzPgogICAgICAgICAgPHAgY2xhc3M9ImNhcmQtdGV4dCI+CiAgICAgICAgICAgIExhcmdlIHNlbWktYXF1YXRpYyBtYW1tYWwgd2l0aCB0aGljayBza2luLCBtYXNzaXZlIGphd3MsIGFuZCBzaG9ydAogICAgICAgICAgICBsZWdzLCBmb3VuZCBpbiBzdWItU2FoYXJhbiBBZnJpY2EuCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

OnJvb3QgewogIC0tdGltZTogNDAwMG1zOwogIC0tdGltZS1mdW5jdGlvbjogY3ViaWMtYmV6aWVyKDAuMTY1LCAwLjg0LCAwLjQ0LCAxKTsKfQoKLmNvbnRhaW5lciB7CiAgYm94LXNoYWRvdzogMHB4IDBweCA1cHggcmdiYSgwLCAwLCAwLCAwLjUpOwogIHBhZGRpbmc6IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKCiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCiAgX19fOiBfX187CiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBhYm92ZSB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCn0KCi5jYXJkOmhvdmVyIHsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICBfX186IF9fXzsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKLmNhcmQ6aG92ZXIgLmNhcmQtZGVzY3JpcHRpb24td3JhcHBlciB7CiAgYm94LXNoYWRvdzogMHB4IDBweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC41KTsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjZmMWYxOwoKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICBfX186IF9fXzsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCmgzLApwIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7Cn0KCi5jYXJkIHsKICBtYXJnaW46IDAgYXV0bzsKICB3aWR0aDogNDAwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICBwYWRkaW5nOiAxMHB4OwogIGJveC1zaGFkb3c6IDBweCAwcHggMTBweCByZ2JhKDAsIDAsIDAsIDAuNSk7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IHRyYW5zZm9ybTsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiB2YXIoLS10aW1lKTsKICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogdmFyKC0tdGltZS1mdW5jdGlvbik7Cn0KCi5jYXJkLWRlc2NyaXB0aW9uLXdyYXBwZXIgewogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIHBhZGRpbmc6IDEwcHggMDsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBhbGw7CiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogdmFyKC0tdGltZSk7CiAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IHZhcigtLXRpbWUtZnVuY3Rpb24pOwp9CgouY2FyZC10aXRsZSB7CiAgZm9udC1zaXplOiAxNHB4OwogIGNvbG9yOiAjMTQ2Yzk0Owp9CgouY2FyZC10ZXh0IHsKICBmb250LXNpemU6IDEycHg7CiAgbWFyZ2luLXRvcDogNXB4OwogIGNvbG9yOiAjMTlhN2NlOwp9

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

OnJvb3QgewogIC0tdGltZTogNDAwMG1zOwogIC0tdGltZS1mdW5jdGlvbjogY3ViaWMtYmV6aWVyKDAuMTY1LCAwLjg0LCAwLjQ0LCAxKTsKfQoKLmNvbnRhaW5lciB7CiAgYm94LXNoYWRvdzogMHB4IDBweCA1cHggcmdiYSgwLCAwLCAwLCAwLjUpOwogIHBhZGRpbmc6IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKCiAgcGVyc3BlY3RpdmU6IDQwMHB4Owp9CgouY2FyZDpob3ZlciB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVaKDUwcHgpOwp9CgouY2FyZDpob3ZlciAuY2FyZC1kZXNjcmlwdGlvbi13cmFwcGVyIHsKICBib3gtc2hhZG93OiAwcHggMHB4IDEwcHggcmdiYSgwLCAwLCAwLCAwLjUpOwogIGJhY2tncm91bmQtY29sb3I6ICNmNmYxZjE7CgogIHRyYW5zZm9ybTogc2tld1goMTBkZWcpOwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKaDMsCnAgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKfQoKLmNhcmQgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA0MDBweDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDBweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC41KTsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogdHJhbnNmb3JtOwogIHRyYW5zaXRpb24tZHVyYXRpb246IHZhcigtLXRpbWUpOwogIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiB2YXIoLS10aW1lLWZ1bmN0aW9uKTsKfQoKLmNhcmQtZGVzY3JpcHRpb24td3JhcHBlciB7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgcGFkZGluZzogMTBweCAwOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IGFsbDsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiB2YXIoLS10aW1lKTsKICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogdmFyKC0tdGltZS1mdW5jdGlvbik7Cn0KCi5jYXJkLXRpdGxlIHsKICBmb250LXNpemU6IDE0cHg7CiAgY29sb3I6ICMxNDZjOTQ7Cn0KCi5jYXJkLXRleHQgewogIGZvbnQtc2l6ZTogMTJweDsKICBtYXJnaW4tdG9wOiA1cHg7CiAgY29sb3I6ICMxOWE3Y2U7Cn0=

Améliorez vos compétences en stylisation avec le cours avancé de CSS. Apprenez à créer des effets visuels époustouflants, à ajouter des animations et à transformer des éléments en utilisant des techniques CSS avancées. Découvrez comment rendre les pages web accessibles sur différents appareils et explorez des outils qui améliorent l'efficacité et la productivité. Ce cours en ligne convient à toute personne souhaitant améliorer ses compétences en ajoutant des styles aux pages web.

Découvrez ce que les apprenants peuvent attendre de ce cours avancé sur le style HTML et CSS. Que devez-vous savoir avant de commencer le cours ? Quels sujets seront abordés ?

Positionnez et gérez les éléments sur les pages web. Apprenez les différentes propriétés de positionnement, découvrez comment utiliser l'ordre d'empilement pour contrôler la visibilité des éléments qui se chevauchent, et enfin, gérez le débordement de contenu.

Explorez la puissance des transitions et apprenez à améliorer l'expérience utilisateur. Découvrez comment animer les propriétés de manière fluide et progressive, créant des transitions d'état harmonieuses.

Apprenez à connaître la propriété d'animation et comment elle peut être utilisée pour créer des designs dynamiques et engageants. Découvrez comment créer des animations complexes en utilisant des keyframes et comment contrôler l'animation.

Explorez la propriété de transformation, qui permet de modifier l'apparence et la position des éléments sur une page web. Apprenez à mettre à l'échelle, à faire pivoter, à incliner et à déplacer des éléments en deux et trois dimensions. Combinez plusieurs transformations pour créer des effets plus complexes.

Les principes et techniques utilisés dans la conception adaptative/réactive visent à rendre les sites web et les applications accessibles et visuellement attrayants sur différents appareils, tailles d'écran et orientations.

Apprenez à connaître les préprocesseurs en CSS et comment ils peuvent aider à écrire un code plus efficace et facile à maintenir. Comprenez comment utiliser les préprocesseurs pour simplifier le flux de travail et générer un code CSS plus propre.

Techniques CSS Avancées

Défi : Ajouter la Translation et l'Inclinaison

Tâche