тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Функция translate

Функция translate задает сдвиг элемента по оси X и оси Y. Используется совместно со свойством transform. Значением свойства служат любые единицы для размера.

Может принимать один или два параметра. Если параметров два - первый параметр задает сдвиг по оси X, а второй - по оси Y. Если параметр один, то он задает сдвиг по оси X.

Значения параметров могут быть положительными и отрицательными. Положительное значение по оси X сдвигает вправо, отрицательное - влево. Положительное значение по оси Y сдвигает вниз, отрицательное - вверх.

Синтаксис

селектор { transform: translate(сдвиг по оси X, сдвиг по оси Y); }

Пример

Если навести мышкой на блок - он сдвинется на 30px вправо:

<div id="elem"></div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: translate(30px); }

:

Пример

Если навести мышкой на блок - он сдвинется на 30px влево:

<div id="elem"></div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: translate(-30px); }

:

Пример

Если навести мышкой на блок - он сдвинется на 15px вправо и на 30px вниз:

<div id="elem"></div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: translate(15px, 30px); }

:

Смотрите также

  • функцию translateX,
    которая задает сдвиг по оси X
  • функцию translateY,
    которая задает сдвиг по оси Y