Функция 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);
}

:

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