Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Skalierung und Rotation Anwenden | Transformation von Elementen mit CSS
Fortgeschrittene CSS-Techniken

bookHerausforderung: Skalierung und Rotation Anwenden

Aufgabe

Erstellen Sie eine ansprechende Online-Shop-Karte für Elektronikartikel, bei der jede Karte ein Bild, einen Namen und einen Preis enthält. Ziel ist es, die visuelle Attraktivität durch folgende Animationen zu steigern:

  1. Bild skalieren: Verwenden Sie die Keyframes-Regel increaseImageSize, um dem Bildelement einen Skalierungseffekt hinzuzufügen, sodass es um 20 % vergrößert wird. Das Endergebnis sollte scale(1.2) sein.
  2. Preis rotieren: Implementieren Sie die Keyframes-Regel rotatePrice, um dem Preiselement einen Rotationseffekt hinzuzufügen, sodass eine vollständige Drehung erfolgt. Das Endergebnis sollte rotate(360deg) sein.

Verwenden Sie die vordefinierten Keyframes-Regeln.

index.html

index.html

index.css

index.css

copy
  1. Für die Skalierungsanimation:
    • Zu Beginn (0%-Punkt) mit scale(1) die Originalgröße beibehalten;
    • Am Mittelpunkt (50%-Punkt) die Größe auf scale(1.1) erhöhen;
    • Am Ende (100%-Punkt) die Größe auf scale(1.2) erhöhen.
  2. Für die Rotationsanimation:
    • Am Anfang (0%-Punkt) den Rotationswinkel auf rotate(0deg) belassen;
    • Am Mittelpunkt (50%-Punkt) zur Hälfte auf rotate(180deg) drehen;
    • Am Ende (100%-Punkt) die Drehung mit rotate(360deg) vollenden.
index.html

index.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 4

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you show me the CSS code for the card with the animations?

How do I apply the scaling and rotation animations to the correct elements?

Can you provide a complete example of the online shop card with these effects?

Awesome!

Completion rate improved to 2.04

bookHerausforderung: Skalierung und Rotation Anwenden

Swipe um das Menü anzuzeigen

Aufgabe

Erstellen Sie eine ansprechende Online-Shop-Karte für Elektronikartikel, bei der jede Karte ein Bild, einen Namen und einen Preis enthält. Ziel ist es, die visuelle Attraktivität durch folgende Animationen zu steigern:

  1. Bild skalieren: Verwenden Sie die Keyframes-Regel increaseImageSize, um dem Bildelement einen Skalierungseffekt hinzuzufügen, sodass es um 20 % vergrößert wird. Das Endergebnis sollte scale(1.2) sein.
  2. Preis rotieren: Implementieren Sie die Keyframes-Regel rotatePrice, um dem Preiselement einen Rotationseffekt hinzuzufügen, sodass eine vollständige Drehung erfolgt. Das Endergebnis sollte rotate(360deg) sein.

Verwenden Sie die vordefinierten Keyframes-Regeln.

index.html

index.html

index.css

index.css

copy
  1. Für die Skalierungsanimation:
    • Zu Beginn (0%-Punkt) mit scale(1) die Originalgröße beibehalten;
    • Am Mittelpunkt (50%-Punkt) die Größe auf scale(1.1) erhöhen;
    • Am Ende (100%-Punkt) die Größe auf scale(1.2) erhöhen.
  2. Für die Rotationsanimation:
    • Am Anfang (0%-Punkt) den Rotationswinkel auf rotate(0deg) belassen;
    • Am Mittelpunkt (50%-Punkt) zur Hälfte auf rotate(180deg) drehen;
    • Am Ende (100%-Punkt) die Drehung mit rotate(360deg) vollenden.
index.html

index.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 4
some-alt