css властивість perspective


Властивість perspective визначає відстань від площини екрана до точки збіжності ліній і тим самим задає, наскільки виражений ефект перспективи. Точка збіжності без задання розташовується в центрі елемента і може бути змінена за допомогою властивості perspective-origin.

Результат роботи властивості зображений на рисунку. Зверніть увагу, що перспектива застосовується не до елементів безпосередньо, а до їх батьків. Для зміни перспективи у окремих елементів використовується функція perspective() властивості transform.

Властивість `perspective`

Більш конкретно, властивість регулює положення нащадків елементу. Тому якщо ви хочете побачити ефект дії цієї властивості на елементі, задавайте її для його батька.

Менше значення робить 3д-ефект більш вираженним, ніж більші значення. Це тому що, менше значення вказує, що користувач знаходить ближче до об'єкта. Тому perspective: 50px; робить перспективу більш вираженою ніж perspective: 500px;.

Нотатка:

Ви зможете побачити як працює ця властивість, тільки коли у елемента є точки, у яких різне положення по осі Z. Наприклад, коли елемент повернули по осі X чи Y.

Нотатка:

Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка backface-visibility може змінюватися у майбутньому.

Синтаксис

perspective: length|none;

Властивість perspective може отримувати 4 значення:

length

Відстань від площини монітора до точки збіжності ліній. Нульове або від'ємне значення скасовує дію перспективи. Чим менше значення, тим більш вираженою виглядає перспектива і навпаки

none

Перспективу не встановлено. Те ж саме, що й 0. Без задання.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивостей від свого батьківського елемента

Значення без задання: none
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.perspective="50px"

Переглядачі

Переглядач
perspective

45.0
12.0 -webkit-

10.0

16.0
10.0 -moz-

9.0
6.0 -webkit-

23.0
15.0 -o-

12.0

Переглядач
perspective

2.0 -webkit-

16.0
10.0 -moz-

9.2
6.1 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад зміни значення властивості

Простий приклад роботи властивості

Встановлення перспективи

div { 


  -webkit-perspective: 500px; /* Chrome, Safari, Opera */ 


  perspective: 500px; 


}

Додаткові посилання