При создании сайта для вашего бизнеса на Кипре или в ЕС ежедневно возникает задача точного позиционирования элементов. Функция CSS translate() — один из самых надёжных инструментов для смещения элемента относительно его исходного положения — по горизонтали, вертикали или по обоим направлениям — без нарушения вёрстки.

Что делает translate()?

Представьте, что вы говорите браузеру: «перемести этот блок на 50 пикселей вправо и на 50% его собственной высоты вниз». Элемент остаётся в потоке документа, но меняется его визуальное положение. Функция описана в черновике CSS Transforms Module Level 1 и используется внутри свойства transform вместе с другими функциями трансформации.

.parent:hover .box {
  transform: translate(50px, 50%);
}

Наведите курсор на блок в демо-примере, и вы увидите, как он смещается на 50% своей ширины влево.

Понятный синтаксис

Формальный синтаксис выглядит так:

<translate()> = translate( <length-percentage>, <length-percentage>? )

Простыми словами: вы передаёте одно или два значения. Одно значение перемещает элемент по горизонтали. Два значения сдвигают его по горизонтали (tx) и вертикали (ty).

Допустимые аргументы

  • tx (обязательный): перемещение по горизонтали. Положительное — вправо, отрицательное — влево.
  • ty (необязательный): перемещение по вертикали. Положительное — вниз, отрицательное — вверх.
/* Один аргумент */
translate(100px)       /* смещение на 100px вправо */
translate(-100%)       /* смещение на 100% ширины элемента влево */

/* Два аргумента */
translate(50px, 100px) /* 50px вниз, затем 100px вправо */
translate(50%, 100%)   /* 50% ширины вниз, затем 100% высоты вправо */

Проценты рассчитываются относительно собственной ширины (для tx) или высоты (для ty) элемента. Абсолютные значения удобны, когда требуется пиксельная точность для адаптивного сайта кипрского бизнеса.

Центрирование элемента? translate() всё ещё работает

До того как justify-self и align-self получили широкую поддержку, стандартным способом центрирования абсолютно позиционированного элемента был:

.modal-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
}

Суть трюка: top: 50%; left: 50% помещает левый верхний угол в центр. Затем translate(-50%, -50%) смещает элемент назад на половину его собственных размеров — идеальное центрирование. Сегодня нативный элемент <dialog> уже центрирован по умолчанию, но translate() остаётся полезным для кастомных модальных окон, особенно при добавлении анимации.

Диагональные перемещения и практические примеры

Нужно, чтобы toast-уведомление выезжало из правого нижнего угла страницы оформления заказа? Здесь translate() незаменим.

.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  transform: translate(40px, 40px);
  transition: transform 0.28s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(0, 0);
}

При добавлении класса .show toast плавно выезжает по диагонали. Плавно, легко и без сдвигов макета, которые могли бы раздражать клиента.

Почему translate() лучше, чем margin

В отличие от margin или top/left, translate() никогда не вызывает перекомпоновку (reflow). Он меняет только визуальное отображение элемента. Соседние элементы остаются на месте, а исходное пространство сохраняется. Это делает его идеальным для анимаций на высоконагруженном интернет-магазине или в многоязычном CRM-интерфейсе, где важна каждая миллисекунда производительности.

.translated {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(80px, 40px);
}

Никакие другие блоки не сдвигаются. Ваша вёрстка остаётся предсказуемой.

Частая ошибка: мерцание при наведении

Применение translate() непосредственно к псевдоклассу :hover может вызвать неприятное мерцание: элемент уходит от курсора, состояние наведения сбрасывается, элемент возвращается обратно, и цикл повторяется. Решение простое — поместите перемещаемый элемент в родительский контейнер и навешивайте hover на родителя:

/* Проблема */
.bad:hover {
  transform: translateX(160px);
}

/* Решение */
.parent:hover .good {
  transform: translateX(160px);
}

Это обеспечивает плавное взаимодействие — важно при создании интерфейсов для клиентов в Лимассоле или по всему ЕС, которые ожидают качественного UX.

Для вашего бизнеса: GDPR, многоязычные сайты и производительность

Если ваш веб-проект ориентирован на рынок Кипра или ЕС, помните, что плавные CSS-трансформации, такие как translate(), ускоряются графическим процессором (GPU). Это снижает нагрузку на процессор, ускоряет рендеринг страницы и радует пользователей — независимо от того, на каком языке ваш сайт: английском, русском или греческом. А поскольку translate() не затрагивает DOM-макет, он отлично сочетается с адаптивными дизайнами и сторонними скриптами, например баннерами согласия GDPR.

Готовы уверенно позиционировать элементы? Начинайте использовать translate() уже сегодня — ваша вёрстка (и ваши клиенты) скажут вам спасибо.