CSS function perspective
Опис
perspective() - це функція трансформації CSS, яка встановлює властивість перспективи для елемента з 3D-трансформаціями. Вона впливає на те, як елементи змінюються у тривимірному просторі, надаючи реалістичність до 3D-сцен та об'єктів на сторінці.
За допомогою функції perspective(), можна створювати ефект глибини та віддаленості. Це додає реалізм до вашого веб-сайту та дозволяє контролювати спосіб відображення елементів у 3D-просторі. Функція perspective() працює разом з іншими функціями трансформації, такими як rotate(), translate(), scale() та іншими, щоб створювати складні ефекти перетворення.
Ця функція приймає один параметр - числове значення (length), яке представляє відстань від точки перегляду до площини перегляду. Значення може бути позитивним числом, вказуючи відстань у пікселях або інших одиницях вимірювання.
Наприклад, для встановлення відстані до площини перегляду в 1000 пікселів, використовуйте:
.element {
perspective: 1000px;
}
Варто зауважити, що значення length може бути негативним, але це застосовується до спеціальних випадків, наприклад, для створення ефекту обертання зсередини (inside-out flipping) в 3D-просторі. Застосування функції perspective() дозволяє створювати вражаючі та реалістичні 3D-ефекти на вашому веб-сайті.
- Порада
-
Використовуйте функцію
автор: Bondperspective()для створення реалістичних 3D-ефектів та глибини на сторінці. - Порада
-
За замовчуванням, значення
автор: Bondlengthвимірюється в пікселях, але можна використовувати інші одиниці вимірювання, такі як відсотки (%),em,remтощо.
Синтаксис
perspective(<length>);Функція perspective може отримувати єдине значення:
-
<length> -
Значення може бути позитивним числом, вказуючи відстань у пікселях або інших одиницях вимірювання (em тощо).
автор: Bond
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 12 | 10 | 4 | 15 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 3 | 18 | 10 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
При наведенні курсору на елемент, він змінює свою глибину та вигляд у тривимірному просторі.
Два однакові елементи, але один з них має змінену глибину після застосування функції perspective().
Коментарі
Коментарів ще немає — будьте першим!