transform-origin

Обновлено: 30.05.2022

transform-origin

Устанавливает координаты точки, относительно которой будет происходить трансформация элемента.

Краткая информация

Значение по умолчанию 50% 50% 0
Наследуется Нет
Применяется К трансформируемым элементам
Анимируется Да

Синтаксис

transform-origin: <x> <y> <z>

Значения

<x> Координата по оси X. Может принимать следующие значения: <размер> | <проценты> | left | center | right. Здесь <размер> — любая единица измерения CSS.
<y> Координата по оси Y. Может принимать следующие значения: <размер> | <проценты> | top | center | bottom
<z> Координата по оси Z. Может задаваться только в любых корректных единицах для измерения длины (исключая проценты).

Оси и значения показаны на рис. 1.

Рис. 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.

Браузеры

transform-origin

Посмотреть совместимость на Can I use?

transform-origin