Challenge: Apply Scaling & Rotation
Task
Create an engaging online shop card for electronics, where each card includes an image, name, and price. The task is to enhance the visual appeal by incorporating the following animations:
- Scaling Image: Utilize the
increaseImageSize
keyframes rule to add a scaling effect to the image element, making it 20% larger. The final result should bescale(1.2)
. - Rotating Price: Implement the
rotatePrice
keyframes rule to add a rotation effect to the price element, completing one full circle. The final result should berotate(360deg)
.
Use the predefined keyframes rules.
index.html
index.css
- For the scaling animation:
- At the start (0% spot), use
scale(1)
to maintain the original size; - At the midpoint (50% spot), increase the size to
scale(1.1)
; - At the end (100% spot), increase the size to
scale(1.2)
.
- At the start (0% spot), use
- For the rotation animation:
- At the beginning (0% spot), keep the rotation angle at
rotate(0deg)
; - At the midpoint (50% spot), rotate halfway to
rotate(180deg)
; - At the end (100% spot), complete the rotation with
rotate(360deg)
.
- At the beginning (0% spot), keep the rotation angle at
index.html
index.css
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 5. Hoofdstuk 4
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.04
Challenge: Apply Scaling & Rotation
Veeg om het menu te tonen
Task
Create an engaging online shop card for electronics, where each card includes an image, name, and price. The task is to enhance the visual appeal by incorporating the following animations:
- Scaling Image: Utilize the
increaseImageSize
keyframes rule to add a scaling effect to the image element, making it 20% larger. The final result should bescale(1.2)
. - Rotating Price: Implement the
rotatePrice
keyframes rule to add a rotation effect to the price element, completing one full circle. The final result should berotate(360deg)
.
Use the predefined keyframes rules.
index.html
index.css
- For the scaling animation:
- At the start (0% spot), use
scale(1)
to maintain the original size; - At the midpoint (50% spot), increase the size to
scale(1.1)
; - At the end (100% spot), increase the size to
scale(1.2)
.
- At the start (0% spot), use
- For the rotation animation:
- At the beginning (0% spot), keep the rotation angle at
rotate(0deg)
; - At the midpoint (50% spot), rotate halfway to
rotate(180deg)
; - At the end (100% spot), complete the rotation with
rotate(360deg)
.
- At the beginning (0% spot), keep the rotation angle at
index.html
index.css
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 5. Hoofdstuk 4