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

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

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

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

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

правити

Нотатка

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

perspective: length|none;

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

length

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

автор: Svitlana

правити

none

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

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

Переглядач
perspective	45.0 <br> 12.0 -webkit-	16.0 <br> 10.0 -moz-	9.0 <br> 6.0 -webkit-	23.0 <br> 15.0 -o-	12.0	10.0

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

Переглядач
perspective	2.0 -webkit-	16.0 <br> 10.0 -moz-	9.2 <br> 6.1 -webkit-

Приклади

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

<div class="scene near"><div class="card">500px</div></div>
<div class="scene far"><div class="card">1500px</div></div>

.scene {
    display: inline-block;
    margin-right: 32px;
}

.near { perspective: 500px; }
.far  { perspective: 1500px; }

.card {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #0172ad;
    color: #fff;
    transform: rotateY(45deg);
}