skip to main content

transform-origin

css

Кратко 🔗

Свойство задаёт положение точки, относительно которой применяются трансформации.

Пример 🔗

<div class="element"></div>
.element {
transform-origin: 0 0;
transform: rotate(-30deg);
}

Здесь элемент поворачивается относительно верхнего левого угла.

Как это понять 🔗

Некоторые трансформации выполняются относительно какой-то точки. Возьмём для примера поворот. По умолчанию он происходит относительно центра элемента. То есть, в центре элемента есть некая непожвижная точка, вокруг которой происходит поворот. Но что, если мы хотим повернуть элемент не относительно центра, а относительно угла? То есть, при повороте угловая точка элемента должна остаться неподвижной, а остальной элемент будет поворачиваться вокруг неё. В этом случае нам поможет свойство transform-origin. Оно задаёт координаты точки, относительно которой будет выполняться трансформация. В примере выше мы задали координаты (0, 0). Это значит, что поворот выполнится вокруг левого верхнего угла элемента.

See the Pen transform-origin 1 by Denis Ezhkov (@ezhkov) on CodePen.

Как пишется 🔗

Способов записи несколько, но мы можем их комбинировать.

Можно записать одним числовым значением:

.element {
transform-origin: 5px;
}

...или одним ключевым словом:

.element {
transform-origin: top;
}

Можно использовать два значения:

.element {
transform-origin: 5px 10%;
transform-origin: 3cm 2px;
transform-origin: left 2px;
transform-origin: right top;
transform-origin: top right;
}

...или три значения:

.element {
transform-origin: 2px 30% 10px;
transform-origin: left 5px -3px;
transform-origin: right bottom 2cm;
transform-origin: bottom right 2cm;
}

Также, не забываем про глобальные значения:

.element {
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;
}

Если одно значение является числовым, то оно воспринимается, как смещение вдоль оси X. Например: transform-origin: 5px это то же самое, что и transform-origin: 5px center.

Если это ключевое слово center, то оно воспринимается, как два значения: transform-origin: center center, то есть, точка трансформации устанавливается в центр элемента.

Если это другое ключевое слово (top, left, right, bottom), то в зависимости от значения точка трансформации смещается либо вдоль оси X, либо вдоль оси Y: transform-origin: top это то же самое, что и transform-origin: center top.

Подсказки 🔗

💡 Два значения задаются для осей X и Y соответственно. Три значения — для X, Y и Z. Для осей X и Y можно задавать ключевые слова: top, bottom, left, right, center. Для оси Z можно задавать только числовые значения.

💡 Свойство не наследуется

В работе 🔗

transform-origin эффективно работает не только при повороте. Плавное масштабирование тоже может давать разный эффект в зависимости от положения точки трансформации.

See the Pen transform-origin 2 by Denis Ezhkov (@ezhkov) on CodePen.