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-ефекти на вашому веб-сайті.

автор: Bond

Порада: Використовуйте функцію perspective() для створення реалістичних 3D-ефектів та глибини на сторінці.
автор: Bond
Порада: За замовчуванням, значення length вимірюється в пікселях, але можна використовувати інші одиниці вимірювання, такі як відсотки (%), em, rem тощо.
автор: Bond

Синтаксис

perspective(<length>);

Функція perspective може отримувати єдине значення:

<length>

Значення може бути позитивним числом, вказуючи відстань у пікселях або інших одиницях вимірювання (em тощо).

автор: Bond

Значення без задання:	none

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	12	10	4	15	12

Підтримка: мобільні переглядачі
Переглядач
	3	18	10	3.2

Приклади

+ запропонувати свій приклад у пісочниці

При наведенні курсору на елемент, він змінює свою глибину та вигляд у тривимірному просторі.

автор: Bond

Два однакові елементи, але один з них має змінену глибину після застосування функції perspective().

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!