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


Задає координати точки, куди дивиться спостерігач. Це властивість працює спільно з perspective і визначає точку збіжності ліній при перспективі. Приклад значення: perspective-origin: x-axis, y-axis, де x-axis та y-axis можуть приймати значення у %, а також left, right, length.

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

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

Нотатка:

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

Синтаксис

perspective-origin: x-axis y-axis|initial|inherit;

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

x-axis

Визначає, де вид знаходиться на вісі х

y-axis

Визначає, де вид знаходиться на вісі у

initial

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

inherit

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

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

Переглядачі

Переглядач
perspective-origin

36.0
12.0 -webkit-

10.0

16.0
10.0 -moz-

4.0 -webkit-

23.0
12.0 -o-

12.0

Переглядач
perspective-origin

3.0 -webkit-

16.0
10.0 -moz-

6.0 -webkit-


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

Приклади


Демонстрація дії різних значень властивості

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

Розміщення бази 3D-елемента

div { 


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


  -webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */ 


  perspective: 150px; perspective-origin: 10% 10%; 


}

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