Функция transform: translate задает сдвиг элемента по оси X и (или) оси Y.

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

Для оси X: положительное значение сдвигает вправо, отрицательное - влево. Для оси Y: положительное значение сдвигает вниз, отрицательное - вверх.

Свойства transform: translateX и transform: translateY задают сдвиг элемента по оси X и Y соответственно.

См. также функции transform: translateZ и transform: translate3d.

Обратите внимание на то, что при любых трансформациях transform, другие элементы будут вести себя так, будто мы не трансформировали элемент, и он даже может налезть на другие.

Синтаксис

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

Значения

Значение Описание
Сдвиг Значение в любых CSS единицах (%?). Может быть как положительным, так и отрицательным.

Значение по умолчанию: 0.

Примеры

Пример

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

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	-o-transform: translate(30px);
	-ms-transform: translate(30px);
	-moz-transform: translate(30px);
	-webkit-transform: translate(30px);
	transform: translate(30px);
}

Результат выполнения кода:

Привет, мир!

Пример

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

#elem {
	border: 1px solid black;
	width: 100px;
	height: 50px;
}
#elem:hover {
	-o-transform: translate(15px, 30px);
	-ms-transform: translate(15px, 30px);
	-moz-transform: translate(15px, 30px);
	-webkit-transform: translate(15px, 30px);
	transform: translate(15px, 30px);
}

Результат выполнения кода:

Привет, мир!