Aufgabe

Erstellen Sie eine interaktive Informationskarte über Tiere. Befolgen Sie diese Schritte, um dynamische Effekte beim Hover hinzuzufügen:

1. Wenden Sie eine perspective von 400px auf das Elternelement an, ein div mit dem Klassennamen container .

2. Verwenden Sie die Funktion translateZ() , um die Karte ( div mit dem Klassennamen card ) um 50px näher an den Benutzer heranzubringen.

3. Fügen Sie eine Schrägstellung entlang der x-Achse um 10deg zur Kartenbeschreibung hinzu ( div mit dem Klassennamen card-description-wrapper ).

1. Für das übergeordnete Container-Element (div mit dem Klassennamen container ), setzen Sie die perspective -Eigenschaft auf 400px , um einen 3D-Raum für die Karten-Transformationen zu schaffen.

2. Um die Karte ( div mit dem Klassennamen card ) näher an den Benutzer heranzubringen, verwenden Sie die translateZ() -Funktion mit einem Wert von 50px . Dies simuliert das Vorwärtsbewegen der Karte im 3D-Raum.

3. Wenden Sie einen Schräg-Effekt entlang der x-Achse auf die Kartenbeschreibung ( div mit dem Klassennamen card-description-wrapper ) an, indem Sie die transform -Eigenschaft mit der skewX() -Funktion und einem Wert von 10deg verwenden.