transform-origin
Оновлено: 06.01.2023
transform-origin
Встановлює координати точки, щодо якої відбуватиметься трансформація елемента.
Коротка інфромація
| Значення за замовчуванням | 50% 50% 0 |
| Успадковується | Ні |
| Застосовується | До елементів, що трансформуються |
| Анімується | Так |
Синтаксис
transform-origin: <x> <y> <z>Значення
| <x> | Координата за віссю X. Може набувати таких значень: <розмір> | <відсотки> | left | center | right. Тут <розмір> - будь-яка одиниця виміру CSS. |
| <y> | Координата за віссю Y. Може набувати таких значень: <розмір> | <відсотки> | top | center | bottom |
| <z> | Координата за віссю Z. Може задаватися тільки в будь-яких коректних одиницях для вимірювання довжини (за винятком відсотків). |
Оси и значения показаны на рис. 1.
Відлік координат ведеться від лівого верхнього кута елемента, за замовчуванням точка трансформації розташована в його центрі, як показано на малюнку вище. У разі використання відсотків вони беруться від розмірів елемента.
Приклад
У цьому прикладі під час наведення курсору на елемент він повертається на 20 градусів проти годинникової стрілки щодо правого верхнього кута.
Об'єктна модель
Об'єкт.style.transformOrigin
Примітка
Internet Explorer 9 підтримує властивість -ms-transform-origin.Chrome до версії 36, Safari до версії 9, Opera до версії 23 і Android підтримують властивість -webkit-transform-origin.
Opera до версії 12.1 і з версії 15 до 23 підтримує властивість -o-transform-origin.
Firefox до версії 16 підтримує властивість -moz-transform-origin.