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.