Что такое translate

translate — это CSS-свойство, которое перемещает элемент по осям X и Y без изменения его положения в потоке документа (не влияет на соседние элементы).

Пример:

.box {
  transform: translate(50px, 20px); /* Сдвиг на 50px вправо и 20px вниз */
}

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

• Работает в связке с transform.
• Производительнее, чем top/left, так как не вызывает перерасчет layout.
• Можно использовать проценты (относительно размеров самого элемента).
• Поддерживает 3D (translate3d для аппаратного ускорения).

.box {
  transform: translate3d(10px, 20px, 30px); /* X, Y, Z */
}