css властивість perspective
Властивість perspective визначає відстань від площини екрана до точки збіжності ліній і тим самим задає, наскільки виражений ефект перспективи. Точка збіжності без задання розташовується в центрі елемента і може бути змінена за допомогою властивості perspective-origin.
Результат роботи властивості зображений на рисунку. Зверніть увагу, що перспектива застосовується не до елементів безпосередньо, а до їх батьків. Для зміни перспективи у окремих елементів використовується функція perspective() властивості transform.
Більш конкретно, властивість регулює положення нащадків елементу. Тому якщо ви хочете побачити ефект дії цієї властивості на елементі, задавайте її для його батька.
Менше значення робить 3д-ефект більш вираженним, ніж більші значення. Це тому що, менше значення вказує, що користувач знаходить ближче до об'єкта. Тому perspective: 50px; робить перспективу більш вираженою ніж perspective: 500px;.
| Нотатка: | Ви зможете побачити як працює ця властивість, тільки коли у елемента є точки, у яких різне положення по осі Z. Наприклад, коли елемент повернули по осі X чи Y. |
| Нотатка: | Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка |
Синтаксис
perspective: length|none;Властивість perspective може отримувати 4 значення:
lengthВідстань від площини монітора до точки збіжності ліній. Нульове або від'ємне значення скасовує дію перспективи. Чим менше значення, тим більш вираженою виглядає перспектива і навпаки
noneПерспективу не встановлено. Те ж саме, що й 0. Без задання.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивостей від свого батьківського елемента
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.perspective="50px" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| perspective | 45.0 |
10.0 |
16.0 |
9.0 |
23.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| perspective | 2.0 -webkit- |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад зміни значення властивості
Простий приклад роботи властивості
Встановлення перспективи
div {
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}