Вы уже двигали элементы в анимациях — например, сдвигали секцию при появлении. Делали вы это свойством transform, но не разбирали его как следует. А это один из важнейших инструментов живого интерфейса: transform умеет сдвигать, масштабировать, вращать и наклонять элементы, не меняя их места в потоке и не тревожа соседей. Именно transform лежит в основе почти всех красивых эффектов: карточка приподнимается при наведении, кнопка слегка увеличивается, иконка поворачивается. И, что критично, эти преобразования браузер выполняет очень эффективно — они не тормозят даже на слабых устройствах.

После этого урока вы сможете двигать, увеличивать, поворачивать и наклонять элементы одним свойством — и использовать это как для наведений через transition, так и внутри @keyframes.

Что уже умеем / что добавим

Вы умеете описывать анимации через @keyframes и управлять ими, а также делать плавные переходы через transition. Теперь разберём transform — что именно двигается и как. В сквозном проекте мы сделаем, чтобы карточка услуги плавно приподнималась и чуть увеличивалась при наведении — эффектно и производительно.

Что вы узнаете в рамках статьи

• Что делает свойство transform и почему оно не сдвигает соседей.
• Как сдвигать элемент через translate.
• Как менять размер через scale и вращать через rotate.
• Как наклонять элемент через skew и комбинировать преобразования.

Ключевые термины

• transform — свойство для геометрических преобразований элемента.
• translate — сдвиг элемента по горизонтали и/или вертикали.
• scale — масштабирование (увеличение или уменьшение) элемента.
• rotate — поворот элемента на заданный угол.
• skew — наклон (перекос) элемента.
• deg — единица измерения угла (градусы).

Свойство transform и почему оно не двигает соседей

transform применяет к элементу геометрическое преобразование — визуально сдвигает, масштабирует, поворачивает или наклоняет его. Ключевая особенность: преобразование меняет только внешний вид, но не занимаемое место в потоке. Соседние элементы «думают», что трансформированный элемент остался на прежнем месте прежнего размера, и не сдвигаются:

.box {
  transform: translateX(20px);
}

Блок визуально сместится на 20 пикселей вправо, но пространство под ним останется, и соседи не поедут. Это огромное преимущество для анимаций: двигая элемент через transform, вы не вызываете пересчёт раскладки всей страницы, поэтому движение получается плавным и быстрым. Именно поэтому transform предпочитают обычным margin/left для анимированных смещений.

Сдвиг: translate

translate сдвигает элемент относительно его исходного положения. Можно двигать по горизонтали (translateX), по вертикали (translateY) или сразу по обеим осям (translate):

.card:hover {
  transform: translateY(-6px);
}

При наведении карточка сместится на 6 пикселей вверх (отрицательное значение — вверх и влево, положительное — вниз и вправо). В связке с transition это даёт эффект «приподнимания». Запись translate(10px, 20px) сдвигает сразу по X и Y. Отдельно стоит запомнить приём центрирования: translate(-50%, -50%) сдвигает элемент на половину его собственных размеров — классический способ точно отцентровать позиционированный элемент.

Масштаб и поворот: scale и rotate

scale меняет размер элемента: scale(1) — исходный размер, scale(1.1) — на 10% больше, scale(0.9) — на 10% меньше. Масштабирование идёт от центра элемента, не сдвигая соседей:

.btn:hover {
  transform: scale(1.05);
}

При наведении кнопка мягко увеличится на 5% — лёгкий, но заметный отклик. rotate поворачивает элемент на заданный угол в градусах: rotate(45deg) — поворот на 45 градусов по часовой стрелке, отрицательный угол — против часовой:

.icon:hover {
  transform: rotate(15deg);
}

Иконка при наведении слегка наклонится — оживит взаимодействие. И scale, и rotate часто используют внутри @keyframes (вспомните пульсацию scale и вращение rotate из прошлых уроков) и в наведениях через transition.

Наклон и комбинирование: skew и несколько преобразований

skew наклоняет (перекашивает) элемент по осям: skewX(10deg) наклоняет по горизонтали, skewY — по вертикали. Используется реже остальных, обычно для декоративных эффектов и косых блоков:

.tag {
  transform: skewX(-8deg);
}

Метка получит лёгкий наклон, будто «курсивом». Самое мощное — что преобразования можно комбинировать, перечисляя их через пробел в одном transform:

.card:hover {
  transform: translateY(-6px) scale(1.02);
}

При наведении карточка одновременно приподнимется и чуть увеличится. Порядок преобразований важен: браузер применяет их слева направо, и translate затем rotate даст иной результат, чем rotate затем translate. Указывайте все нужные преобразования в одном transform — если написать несколько свойств transform, последнее перекроет предыдущие.

Применяем в проекте

Сделаем карточку услуги сайта компании интерактивной: при наведении она плавно приподнимется и чуть увеличится, а тень углубится — получится ощущение, что карточка «выходит вперёд». Соединим transform с уже знакомым transition.

.card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Наведите мышь на карточку: она плавно поднимется на несколько пикселей, немного вырастет и отбросит более глубокую тень — будто приподнялась над страницей. Соседние карточки при этом не сдвигаются, ведь transform не меняет занимаемое место. Эффект выглядит дорого, а работает быстро, потому что браузер оптимизирует именно такие преобразования. Пара строк — и статичная карточка стала живой.

Частые ошибки

• Анимировать margin/left вместо transform.
  Смещение через transform не пересчитывает раскладку и работает плавнее; для анимаций предпочитайте его.
• Несколько свойств transform.
  Второе свойство transform перекрывает первое; перечисляйте все преобразования в одном значении через пробел.
• Забыть единицу угла.
  rotate(45) не сработает; угол пишут с единицей — rotate(45deg).
• Слишком сильный масштаб.
  scale(1.5) при наведении выглядит грубо; для отклика достаточно 1.02–1.06.

Итоги

Отличная работа — вы освоили трансформации! Теперь вы умеете сдвигать элементы через translate, менять их размер через scale, поворачивать через rotate и наклонять через skew, а главное — понимаете, почему transform не двигает соседей и потому идеален для плавных анимаций. Вы комбинируете преобразования в одном свойстве и соединяете их с transition. В сквозном проекте карточка услуги стала эффектно приподниматься при наведении.

Прекрасный прогресс — ваши интерфейсы двигаются красиво и быстро! В следующем уроке мы поговорим о важной стороне анимаций: производительности и доступности. Узнаем, что анимировать выгодно, а что — нет, и как уважать настройку пользователей, которым движение мешает, через prefers-reduced-motion.