Что такое transform

transform в CSS позволяет изменять внешний вид элемента с помощью различных трансформаций: перемещение, масштабирование, поворот, наклон. Работает в 2D и 3D пространстве.

Основные функции:

• translate(x, y) – сдвиг элемента
• scale(x, y) – изменение размера
• rotate(deg) – поворот
• skew(x, y) – наклон

Пример:

.box {
  transform: translate(50px, 20px) rotate(45deg) scale(1.2);
}

Особенности:

• Не влияет на поток документа (соседние элементы не сдвигаются)
• Можно комбинировать несколько трансформаций
• Для 3D-эффектов нужен transform-style: preserve-3d