Вивчайте Завдання: Застосування Масштабування та Обертання | Трансформація Елементів за Допомогою CSS

Завдання

Створити привабливу картку онлайн-магазину електроніки, де кожна картка містить зображення, назву та ціну. Необхідно підвищити візуальну привабливість, додавши такі анімації:

Масштабування зображення: Використати правило ключових кадрів increaseImageSize для додавання ефекту масштабування до елемента зображення, збільшуючи його на 20%. Кінцевий результат має бути scale(1.2).
Обертання ціни: Реалізувати правило ключових кадрів rotatePrice для додавання ефекту обертання до елемента ціни, здійснюючи повний оберт. Кінцевий результат має бути rotate(360deg).

Використовувати заздалегідь визначені правила ключових кадрів.

index.html

index.css

Для анімації масштабування:
- На початку (0%), використовуйте scale(1) для збереження початкового розміру;
- На середині (50%), збільшіть розмір до scale(1.1);
- В кінці (100%), збільшіть розмір до scale(1.2).
Для анімації обертання:
- На початку (0%), залиште кут обертання rotate(0deg);
- На середині (50%), оберніть на половину до rotate(180deg);
- В кінці (100%), завершіть обертання до rotate(360deg).

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 4

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

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

Свайпніть щоб показати меню

Завдання

Масштабування зображення: Використати правило ключових кадрів increaseImageSize для додавання ефекту масштабування до елемента зображення, збільшуючи його на 20%. Кінцевий результат має бути scale(1.2).
Обертання ціни: Реалізувати правило ключових кадрів rotatePrice для додавання ефекту обертання до елемента ціни, здійснюючи повний оберт. Кінцевий результат має бути rotate(360deg).

Використовувати заздалегідь визначені правила ключових кадрів.

index.html

index.css

Для анімації масштабування:
- На початку (0%), використовуйте scale(1) для збереження початкового розміру;
- На середині (50%), збільшіть розмір до scale(1.1);
- В кінці (100%), збільшіть розмір до scale(1.2).
Для анімації обертання:
- На початку (0%), залиште кут обертання rotate(0deg);
- На середині (50%), оберніть на половину до rotate(180deg);
- В кінці (100%), завершіть обертання до rotate(360deg).

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 4