Використання перспективи для ефектів глибини
Усі елементи відображаються плоско на веб-сторінці. Проте можна додати глибину. perspective додає ефект 3D-елементів. Синтаксис наступний:
perspective: value in px;
Перспективу застосовують до батьківського елемента, який містить елемент із трансформацією. Таким чином, батьківський елемент стає сценою для трансформованого елемента. Щоб візуалізувати цю концепцію, зверніть увагу на наступну анімацію. Синя рамка — це батьківський елемент із перспективою, а елемент всередині має обертання.
Практичне завдання: додати перспективу. Необхідно додати perspective до батьківських елементів (div з класом box-border), які містять дочірні елементи з трансформацією.
index.html
index.css
Примітка
Властивість perspective визначає, на якій відстані об'єкт знаходиться від користувача. Тому менше значення призведе до більш вираженого 3D-ефекту, ніж більше значення.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.04Використання перспективи для ефектів глибини
Свайпніть щоб показати меню
Усі елементи відображаються плоско на веб-сторінці. Проте можна додати глибину. perspective додає ефект 3D-елементів. Синтаксис наступний:
perspective: value in px;
Перспективу застосовують до батьківського елемента, який містить елемент із трансформацією. Таким чином, батьківський елемент стає сценою для трансформованого елемента. Щоб візуалізувати цю концепцію, зверніть увагу на наступну анімацію. Синя рамка — це батьківський елемент із перспективою, а елемент всередині має обертання.
Практичне завдання: додати перспективу. Необхідно додати perspective до батьківських елементів (div з класом box-border), які містять дочірні елементи з трансформацією.
index.html
index.css
Примітка
Властивість perspective визначає, на якій відстані об'єкт знаходиться від користувача. Тому менше значення призведе до більш вираженого 3D-ефекту, ніж більше значення.
Дякуємо за ваш відгук!
