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

bookЗавдання: Поєднання Трансляції Та Перекошування

Завдання

Створити інтерактивну інформаційну картку про тварин. Виконайте наступні кроки для додавання динамічних ефектів при наведенні:

  1. Застосувати perspective зі значенням 400px до батьківського елемента — div з класом container.
  2. Використати функцію translateZ(), щоб наблизити картку (div з класом card) до користувача на 50px.
  3. Додати нахил по осі x на 10deg до опису картки (div з класом card-description-wrapper).
index.html

index.html

index.css

index.css

copy
  1. Для батьківського контейнера (div з класом container) встановіть властивість perspective зі значенням 400px, щоб створити 3D-простір для трансформацій картки.
  2. Щоб наблизити картку (div з класом card) до користувача, використовуйте функцію translateZ() зі значенням 50px. Це імітує рух картки вперед у 3D-просторі.
  3. Застосуйте ефект нахилу по осі x до опису картки (div з класом card-description-wrapper), використовуючи властивість transform з функцією skewX() і значенням 10deg.
index.html

index.html

index.css

index.css

copy

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Awesome!

Completion rate improved to 2.04

bookЗавдання: Поєднання Трансляції Та Перекошування

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

Завдання

Створити інтерактивну інформаційну картку про тварин. Виконайте наступні кроки для додавання динамічних ефектів при наведенні:

  1. Застосувати perspective зі значенням 400px до батьківського елемента — div з класом container.
  2. Використати функцію translateZ(), щоб наблизити картку (div з класом card) до користувача на 50px.
  3. Додати нахил по осі x на 10deg до опису картки (div з класом card-description-wrapper).
index.html

index.html

index.css

index.css

copy
  1. Для батьківського контейнера (div з класом container) встановіть властивість perspective зі значенням 400px, щоб створити 3D-простір для трансформацій картки.
  2. Щоб наблизити картку (div з класом card) до користувача, використовуйте функцію translateZ() зі значенням 50px. Це імітує рух картки вперед у 3D-просторі.
  3. Застосуйте ефект нахилу по осі x до опису картки (div з класом card-description-wrapper), використовуючи властивість transform з функцією skewX() і значенням 10deg.
index.html

index.html

index.css

index.css

copy

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

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

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

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