perspective-origin
Оновлено: 06.01.2023
perspective-origin
Задає координати точки, куди дивиться спостерігач. Ця властивість працює спільно з властивістю perspective і визначає точку збіжності ліній під час перспективи.
Коротка інформація
| Значення за замовчуванням | 50% 50% |
| Успадковується | Ні |
| Застосовується | До елементів, що трансформуються |
| Анімується | Так |
Синтаксис
perspective-origin: <позиція>
Тут <позиція>:
[ <відсотки> | <розмір> | left | center | right | top | bottom] | [[ <відсотки> | <розмір> | left | center | right ] && [ <відсотки> | <розмір> | top | center | bottom ]]
Значення
Якщо вказано тільки одне значення, то воно вважається координатою X, два значення визначають спочатку координату X, потім Y, при цьому ключові слова можуть йти в довільному порядку. Відсотки задаються щодо ширини елемента, відлік координат починається з його лівого верхнього кута. Відсотки, пікселі та інші одиниці CSS можуть бути від'ємними. Нижче наведено, як пов'язані між собою процентний запис і ключові слова.
- left = left center = 0 50% — центр лівого краю.
- center = center center = 50% 50% — центральна точка.
- right = right center = 100% 50% — центр правого краю.
- top = center top = 50% 0 — центр верхнього краю.
- bottom = center bottom 50% 100% — центр нижнього краю.
- left top = 0 0 — лівий верхній кут.
- left bottom = 0 100% — лівий нижній кут.
- right top = 100% 0 — правий верхній кут.
- right bottom = 100% 100% — правий нижній кут.
Приклад
Об'єктна модель
Об'єкт.style.perspectiveOrigin
Примітка
Браузери Chrome до версії 36, Opera до версії 23, Safari, Android розуміють властивість -webkit-perspective-origin.
Firefox до версії 16 розуміє властивість -moz-perspective-origin.