css властивість perspective-origin
Задає координати точки, куди дивиться спостерігач. Це властивість працює спільно з perspective і визначає точку збіжності ліній при перспективі. Приклад значення: perspective-origin: x-axis, y-axis, де x-axis та y-axis можуть приймати значення у %, а також left, right, length.
Властивість регулює положення нащадків елементу. Тому якщо ви хочете побачити ефект дії цієї властивості на елементі, задавайте її для його батька.
| Нотатка: | Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка |
Синтаксис
perspective-origin: x-axis y-axis|initial|inherit;Властивість perspective-origin може отримувати 4 значення:
| Значення без задання: | 50% 50% |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.perspectiveOrigin="10px 50%" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| perspective-origin | 36.0 |
10.0 |
16.0 |
4.0 -webkit- |
23.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| perspective-origin | 3.0 -webkit- |
16.0 |
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%;
}