transform — origin
«Точка опоры» для применения трансформаций к элементу.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 5 июля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство задаёт положение точки, относительно которой применяются трансформации.
Пример
Скопировать ссылку «Пример» Скопировано
div class="element">div>
.element transform-origin: 0 0; transform: rotate(-30deg);>.element transform-origin: 0 0; transform: rotate(-30deg); >
Здесь элемент поворачивается относительно верхнего левого угла.
Как понять
Скопировать ссылку «Как понять» Скопировано
Некоторые трансформации выполняются относительно какой-то точки. Возьмём для примера поворот. По умолчанию он происходит относительно центра элемента. То есть в центре элемента есть некая неподвижная точка, вокруг которой происходит поворот. Но что, если мы хотим повернуть элемент не относительно центра, а относительно угла? То есть при повороте угловая точка элемента должна остаться неподвижной, а остальной элемент будет поворачиваться вокруг неё. В этом случае нам поможет свойство transform — origin . Оно задаёт координаты точки, относительно которой будет выполняться трансформация. В примере ниже мы задали для второго элемента координаты (0 , 0 ) . Это значит, что поворот выполнится вокруг левого верхнего угла элемента.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Способов записи несколько, но мы можем их комбинировать.
Можно записать одним числовым значением:
.element transform-origin: 5px;>.element transform-origin: 5px; >
. или одним ключевым словом:
.element transform-origin: top;>.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: 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: 2px 30% 10px; transform-origin: left 5px -3px; transform-origin: right bottom 2cm; transform-origin: bottom right 2cm; >
Если одно значение является числовым, то оно воспринимается, как смещение вдоль оси 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 можно задавать только числовые значения.
Не лишним будет напомнить, что в CSS начало осей x, y и z — это левый верхний угол элемента. Ось x направлена вправо, ось y направлена вниз, ось z — от плоскости экрана к пользователю.
�� Свойство не наследуется.
На практике
Скопировать ссылку «На практике» Скопировано
Денис Ежков советует
Скопировать ссылку «Денис Ежков советует» Скопировано
�� transform — origin эффективно работает не только при повороте. Плавное масштабирование тоже может давать разный эффект в зависимости от положения точки трансформации.
transform-origin¶
Свойство transform-origin устанавливает координаты точки, относительно которой будет происходить трансформация элемента.
Демо¶
Трансформации
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
/* One-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword y-offset */ transform-origin: left 2px; /* x-offset-keyword y-offset-keyword */ transform-origin: right top; /* y-offset-keyword x-offset-keyword */ transform-origin: top right; /* x-offset y-offset z-offset */ transform-origin: 2px 30% 10px; /* x-offset-keyword y-offset z-offset */ transform-origin: left 5px -3px; /* x-offset-keyword y-offset-keyword z-offset */ transform-origin: right bottom 2cm; /* y-offset-keyword x-offset-keyword z-offset */ transform-origin: bottom right 2cm; /* Global values */ transform-origin: inherit; transform-origin: initial; transform-origin: revert; transform-origin: revert-layer; transform-origin: unset; Значения¶
Координата по оси X. Может принимать следующие значения:
Здесь — любая единица измерения CSS.
Координата по оси Y. Может принимать следующие значения:
Координата по оси Z. Может задаваться только в любых корректных единицах для измерения длины (исключая проценты).
Оси и значения показаны на рис. 1.
Отсчёт координат ведётся от левого верхнего угла элемента, по умолчанию точка трансформации находится в его центре, как показано на рисунке выше. При использовании процентов они берутся от размеров элемента.
Примечание¶
- Internet Explorer 9 поддерживает свойство -ms-transform-origin .
- Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform-origin .
- Safari поддерживает свойство -webkit-transform-origin .
- Opera до версии 12.10 и с версии 15 до 23 поддерживает свойство -o-transform-origin .
- Firefox до версии 16 поддерживает свойство -moz-transform-origin .
Значение по-умолчанию: 50% 50% 0
Применяется к трансформируемым элементам
Спецификации¶
Поддержка браузерами¶
CSS Transform 2D:
Can I Use transforms2d? Data on support for the transforms2d feature across the major browsers from caniuse.com.
CSS Transform 3D:
Can I Use transforms3d? Data on support for the transforms3d feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
html> head> meta charset="utf-8" /> title>transform-origintitle> style> div background: #fc0; padding: 10px; display: inline-block; border: 1px solid #000; > div:hover /* Точка поворота в правом верхнем углу */ transform-origin: 100% 0; /* Поворачиваем на 20 градусов против часовой стрелки */ transform: rotate(-20deg); > style> head> body> div>Примерdiv> body> html> CSS свойство transform-origin
Свойство t transform-origin позволяет изменить позицию трансформации элемента.
Transform-origin работает только вместе со свойством transform.
Данное свойство может быть установлено, используя ключевые слова, значения длины или проценты.
Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии).
| Значение по умолчанию | 50% 50% 0 |
| Применяется | К трансформируемым элементам. |
| Наследуется | Нет |
| Анимируемое | Да. Градус анимируем. |
| Версия | CSS3 |
| DOM синтаксис | Object.style.transform-origin = «10% 30%»; |
Синтаксис
transform-origin: x-offset y-offset z-offset | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> .big < position: relative; height: 300px; width: 300px; margin: 80px; padding: 5px; border: 2px solid #666; background-color: #eee; > .little < padding: 60px; position: absolute; border: 2px solid #666; background-color: #8ebf42; -ms-transform: rotate(35deg); /* IE 9 */ -ms-transform-origin: 70% 90%; /* IE 9 */ -webkit-transform: rotate(35deg); /* Safari 3-8 */ -webkit-transform-origin: 70% 90%; /* Safari 3-8 */ transform: rotate(35deg); transform-origin: 70% 90%; > style> head> body> h2>Пример свойства transform-origin h2> div class="big"> div class="little">Box div> div> body> html>В следующем примере можно увидеть разницу между значениями:
Пример
html> html> head> title>Заголовок документа title> style> body < background-color: #eee; font-size: 1.1em; font-family: 'Roboto', Helvetica, sans-serif; > .container < margin: 10px auto; max-width: 700px; > .wrap < width: 150px; height: 150px; border: 2px solid #666; display: inline-block; margin: 100px; > .box < width: 150px; height: 150px; position: relative; color: #eee; text-align: center; line-height: 150px; -webkit-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg); > .a < background-color: #0747af; > .b < background-color: #40b530; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; > .c < background-color: #666; -webkit-transform-origin: 90% 120%; -ms-transform-origin: 90% 120%; transform-origin: 90% 120%; > .d < background-color: #ffdb11; -webkit-transform-origin: 80px 40px; -ms-transform-origin: 80px 40px; transform-origin: 80px 40px; > style> head> body> h2>Пример свойства transform-origin h2> div class="container"> div class="wrap"> div class="box a"> 50% 50% div> div> div class="wrap"> div class="box b"> top left div> div> div class="wrap"> div class="box c"> 90% 120% div> div> div class="wrap"> div class="box d"> 80px 40px div> div> div> body> html>Значения
- left
- right
- center
- length
- percentage
- top
- center
- bottom
- length
- percentage
- length
transform-origin
Устанавливает координаты точки, относительно которой будет происходить трансформация элемента.
Синтаксис
Значения
Координата по оси X. Может принимать следующие значения:
Здесь — любая единица измерения CSS.
Координата по оси Y. Может принимать следующие значения:
Координата по оси Z. Может задаваться только в любых корректных единицах для измерения длины (исключая проценты).
Оси и значения показаны на рис. 1.
Рис. 1. Оси при трансформации элемента
Пример
HTML5 CSS3 IE Cr Op Sa Fx
transform-origin Пример В данном примере при наведении курсора на элемент он поворачивается на 20 градусов против часовой стрелки относительно правого верхнего угла.
Объектная модель
[window.]document.getElementById(» elementID «).style.transformOrigin
Браузеры
Internet Explorer 9 поддерживает нестандартное свойство -ms-transform-origin .
Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transform -origin .
Opera до версии 12.10 поддерживает нестандартное свойство -o-transform -origin .
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transform -origin .