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.