Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Завдання: Застосування Масштабування та Обертання | Трансформація Елементів за Допомогою CSS
Просунуті техніки CSS

bookЗавдання: Застосування Масштабування та Обертання

Завдання

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

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

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

index.html

index.html

index.css

index.css

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

index.html

index.css

index.css

copy

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

Як ми можемо покращити це?

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

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

bookЗавдання: Застосування Масштабування та Обертання

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

Завдання

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

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

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

index.html

index.html

index.css

index.css

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

index.html

index.css

index.css

copy

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

Як ми можемо покращити це?

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

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