Клавиша / esc

transform-origin

«Точка опоры» для применения трансформаций к элементу.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано
        
          
          <div class="element"></div>
          <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 можно задавать только числовые значения.

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

На практике

Скопировано

Денис Ежков советует

Скопировано

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

Открыть демо в новой вкладке