Когда вам нужно сдвинуть элемент вбок в веб-интерфейсе, translateX() — это CSS-функция, которая делает именно это. Она смещает элемент по горизонтали — вправо для положительных значений, влево для отрицательных.

Что делает translateX()

Эта функция используется внутри свойства transform и описана в черновике CSS Transforms Module Level 1. Она принимает один аргумент типа <length-percentage>:

  • <length>: Абсолютные единицы, например 80px, сдвигают элемент на 80px вправо; -24ch — на 24 символа влево.
  • <percentage>: Относительно собственной ширины элемента. Для блока шириной 400px translateX(50%) сдвинет его на 200px вправо, а translateX(-50%) — на 200px влево.

Практические примеры для бизнес-сайтов

Выдвижные боковые панели

Частый паттерн для мобильной навигации: панель выезжает сбоку. Начните с transform: translateX(-100%), чтобы скрыть её за экраном, затем переключайте на translateX(0) при клике пользователя. Добавьте transition для плавности.

.sidebar { transform: translateX(-100%); transition: transform 0.2s ease-in; }
.sidebar.open { transform: translateX(0); }

Бесконечная бегущая строка

Нужно показать ряд логотипов клиентов или новинок в интернет-магазине? Бегущая строка прокручивает их непрерывно. Используйте анимацию ключевых кадров от translateX(0) до translateX(-50%) с параметром animation: marquee-scroll 20s linear infinite. Смещение влево на половину ширины, затем цикл.

Скелетоны с эффектом мерцания

Предотвратите смещение макета во время загрузки контента — это особенно важно для сайтов, соответствующих GDPR в ЕС, где скорость имеет значение. Статичный серый плейсхолдер работает, но добавление мерцания делает его более аккуратным. Используйте псевдоэлемент ::after, начиная с translateX(-120%), анимируйте до 120% и повторяйте бесконечно. Градиент проходит по скелетону как свет.

Ключевая особенность: без смещения макета

В отличие от margin или position: relative, translateX() не влияет на поток документа. Элемент визуально перемещается, но его исходное пространство остаётся зарезервированным. Соседние блоки не сдвигаются и не перестраиваются. Это делает функцию идеальной для анимаций без дорогих пересчётов макета — серьёзный плюс для производительности на мобильных устройствах.

Осторожно: мерцание при наведении

Если применить translateX() напрямую к состоянию :hover, и элемент сдвинется достаточно далеко от курсора, наведение пропадёт, элемент вернётся обратно, и возникнет мерцающий цикл. Решение: оберните движущийся элемент в родительский контейнер и прикрепите :hover к родителю. Дочерний элемент сдвигается, а наведение остаётся стабильным.