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-ефекти на вашому веб-сайті.
| Порада: | Використовуйте функцію |
| Порада: | За замовчуванням, значення |
Синтаксис
perspective(<length>);<length>Значення може бути позитивним числом, вказуючи відстань у пікселях або інших одиницях вимірювання (em тощо).
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
12 |
10 |
4 |
15 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
3 |
18 |
10 |
3.2 |
Мобільних переглядачів ще не додано.
Приклади
При наведенні курсору на елемент, він змінює свою глибину та вигляд у тривимірному просторі.
Два однакові елементи, але один з них має змінену глибину після застосування функції perspective().