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

Усі елементи відображаються плоско на веб-сторінці. Проте можна додати глибину. perspective додає ефект 3D-елементів. Синтаксис наступний:

perspective: value in px;

Перспективу застосовують до батьківського елемента, який містить елемент із трансформацією. Таким чином, батьківський елемент стає сценою для трансформованого елемента. Щоб візуалізувати цю концепцію, зверніть увагу на наступну анімацію. Синя рамка — це батьківський елемент із перспективою, а елемент всередині має обертання.

Практичне завдання: додати перспективу. Необхідно додати perspective до батьківських елементів (div з класом box-border), які містять дочірні елементи з трансформацією.

index.html

index.css

Примітка

Властивість perspective визначає, на якій відстані об'єкт знаходиться від користувача. Тому менше значення призведе до більш вираженого 3D-ефекту, ніж більше значення.

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

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

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

Запитати АІ

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

Suggested prompts:

What value should I use for the perspective property?

Can you explain how perspective affects child elements with transformations?

Can you show an example of adding perspective to a parent div?

Awesome!

Completion rate improved to 2.04