Справочник · CSS

transform: сдвиг, поворот и масштаб

Редакция PraktumОбновлено 24 октября 20266 мин чтенияУровень: новичок

Свойство transform визуально сдвигает, поворачивает, масштабирует или наклоняет элемент: transform: translateY(-4px) rotate(5deg). Место элемента в раскладке при этом не меняется — соседи стоят так, будто он не двигался. Поэтому transform идеален для анимаций и эффектов при наведении.

Минимальный пример

.card { transition: transform .2s ease; }
.card:hover { transform: translateY(-4px) scale(1.02); }

.arrow { transition: transform .2s ease; }
.is-open .arrow { transform: rotate(180deg); }

Карточка при наведении приподнимается и чуть увеличивается, стрелка в раскрытом блоке поворачивается. Текст рядом не прыгает: transform меняет только отрисовку.

Функции transform

Проценты в translate считаются от размеров самого элемента, а не родителя: translate(-50%, -50%) сдвигает элемент на половину его ширины и высоты — так центрируют абсолютно позиционированные блоки.

Порядок функций важен

.a { transform: translateX(100px) rotate(45deg); }  /* сдвинуть, затем повернуть на месте */
.b { transform: rotate(45deg) translateX(100px); }  /* повернуть оси, затем сдвинуть по диагонали */

Каждая функция меняет систему координат для следующей. В первом случае элемент уезжает вправо и поворачивается вокруг себя. Во втором оси уже повёрнуты на 45°, и «вправо» означает по диагонали вниз. Если анимация ведёт себя странно, проверь порядок.

transform-origin: точка преобразования

.door  { transform-origin: left center; transform: rotateY(-35deg); }
.badge { transform-origin: top right; transform: scale(1.2); }
.hand  { transform-origin: 50% 100%; } /* стрелка часов вращается вокруг низа */

По умолчанию поворот и масштаб идут вокруг центра элемента. transform-origin переносит эту точку: дверь открывается на петлях слева, бейдж растёт от своего угла, а не во все стороны.

Отдельные свойства translate, rotate и scale

.icon { rotate: 15deg; }
.icon:hover { scale: 1.1; }   /* не затирает rotate */
.card { translate: 0 -4px; }

Есть отдельные свойства translate, rotate и scale. В отличие от единого transform, они не затирают друг друга: если иконка повёрнута, а при наведении нужно увеличить её, достаточно задать только scale. С общим transform пришлось бы повторять и поворот. Отдельные свойства применяются в порядке translate → rotate → scale, затем transform.

Ловушка: transform перезаписывает целиком

.modal { transform: translate(-50%, -50%); }   /* центрирование */
.modal.is-open { transform: scale(1); }      /* центрирование потеряно! */
.modal.is-open { transform: translate(-50%, -50%) scale(1); } /* правильно */

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

Побочные эффекты: слои и fixed

Элемент с transform (кроме none) создаёт новый контекст наложения: z-index его детей сравнивается только внутри него. Кроме того, он становится контейнером для потомков с position: fixed — «фиксированное» модальное окно внутри такого блока начнёт двигаться вместе с ним. Если z-index или fixed ведут себя странно, проверь, нет ли transform у предков.

Почему transform плавный

Изменение transform не заставляет браузер пересчитывать раскладку страницы — он перерисовывает только сам элемент, часто на видеокарте. Поэтому анимации через translate и scale плавнее, чем через top, left или width. Не злоупотребляй will-change: transform: подсказка резервирует память и нужна только для действительно тяжёлых анимаций.

transform или position

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

• Ждут, что соседи освободят место под увеличенный элемент.
• Задают новый transform и теряют уже применённое центрирование.
• Путают порядок функций и получают неожиданную траекторию.
• Случайно создают контекст наложения и ломают z-index выпадающего меню.
• Сильно увеличивают текст через scale — он становится размытым.

Доступность

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

Поддержка браузерами

transform и 2D-функции поддерживаются всеми браузерами, 3D-функции — всеми актуальными. Отдельные свойства translate, rotate и scale работают в современных версиях браузеров.

.button { transition: transform .2s ease; }
.button:hover { transform: translateY(-2px); }

.arrow { transition: transform .2s ease; }
.is-open .arrow { transform: rotate(180deg); }

.badge { transform-origin: top right; transition: transform .2s ease; }
.card:hover .badge { transform: scale(1.15); }