Функция transform: translate3d() задает сдвиг элемента на заданное значение одновременно по осям X, Y, Z в трехмерном пространстве.

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

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

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

Синтаксис

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

Значения

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

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

Примеры

Пример

В данном примере по наведению элемент сдвинется на 20px по оси X, 30px по оси Y и 40px по оси Z (по оси Z будет незаметно):

#elem {
	border: 1px solid black;
	width: 300px;
	height: 100px;
}
#elem:hover {
	-o-transform: translate3d(20px, 30px, 40px);
	-ms-transform: translate3d(20px, 30px, 40px);
	-moz-transform: translate3d(20px, 30px, 40px);
	-webkit-transform: translate3d(20px, 30px, 40px);
	transform: translate3d(20px, 30px, 40px);
}

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

Привет, мир!