transform

Свойство transform используем, когда нам нужно применить к элементу какие-либо трансформации: искажение, поворот, смещение, масштабирование.

Смещаем визуальное представление элемента на 120 пикселей вправо:

        
          
          .selector {  transform: translateX(120px);}
          .selector {
  transform: translateX(120px);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Ключевые слова:

        
          
          .selector {  transform: none;}
          .selector {
  transform: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функция в качестве значения:

        
          
          .selector {  transform: matrix(1, 2, 3, 4, 5, 6);}
          .selector {
  transform: matrix(1, 2, 3, 4, 5, 6);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Подробно о функциях, которые можно указывать в качестве значения, написано в статье «Функции CSS-трансформации».

Несколько значений:

        
          
          .selector {  transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);}
          .selector {
  transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Часто бывает необходимо каким-то образом трансформировать визуальное представление элемента (масштабировать, повернуть, переместить) и при этом никак не затронуть соседние элементы в документе. Для подобных преобразований используется свойство transform. В качестве значения выступают различные функции трансформации: rotate, translate, scale, skew.

Стоит обратить особое внимание на тот факт, что трансформируемый элемент при трансформациях никак не взаимодействует с соседними элементами. Он как бы «приподнимается» над остальным содержимым. При этом он не уходит из потока документа, и остальные элементы располагаются так, как располагались до применения трансформаций.

💡 Трансформировать можно только трансформируемые элементы. Звучит как «масло масляное», но на странице существуют определённые типы элементов, к которым не применима стандартная блочная модель. Нельзя трансформировать строчные и табличные элементы.

💡 Если среди значений есть функция perspective(), то она должна быть первой среди всех значений:

Неправильно:

        
          
          .selector {  transform: translate(10px, 0, 20px) rotateY(3deg) perspective(500px);}
          .selector {
  transform: translate(10px, 0, 20px) rotateY(3deg) perspective(500px);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Правильно:

        
          
          .selector {  transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);}
          .selector {
  transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Можно применять трансформации сразу к нескольким осям, используя сокращённые функции:

        
          
          .selector {  transform: translateX(10px) translateY(0) translateZ(20px);}
          .selector {
  transform: translateX(10px) translateY(0) translateZ(20px);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Или можно использовать одну функцию translate, указав значение для всех трёх осей:

        
          
          .selector {  transform: translate(10px, 0, 20px);}
          .selector {
  transform: translate(10px, 0, 20px);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Если свойство transform имеет значение, отличное от none, то создаётся новый контекст наложения. Это означает, что относительно этого элемента теперь будут позиционироваться все дочерние элементы, у которых position: fixed или position: absolute.

💡 Чтобы трансформации вдоль оси z работали и выглядели максимально естественно, трансформируемый элемент должен лежать в родителе, которому задано свойство perspective:

        
          
          .parent {  perspective: 500px;}.child {  transform: translateZ(100px) rotateX(25deg);}
          .parent {
  perspective: 500px;
}

.child {
  transform: translateZ(100px) rotateX(25deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Скопировать ссылку "На практике" Скопировано

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

Скопировать ссылку "Денис Ежков советует" Скопировано

🛠 Благодаря тому, что трансформации элемента никак не затрагивают соседей, свойство transform в сочетании с transition активно используется для создания плавных анимаций элемента при наведении, либо при изменении состояния.