transform-origin

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

        
          
          <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 эффективно работает не только при повороте. Плавное масштабирование тоже может давать разный эффект в зависимости от положения точки трансформации.

+ Развернуть