Função translate

A função translate define o deslocamento de um elemento ao longo do eixo X e do eixo Y. É usada em conjunto com a propriedade transform. Os valores da propriedade podem ser quaisquer unidades de tamanho.

Pode receber um ou dois parâmetros. Se houver dois parâmetros - o primeiro define o deslocamento ao longo do eixo X, e o segundo - ao longo do eixo Y. Se houver um único parâmetro, ele define o deslocamento ao longo do eixo X.

Os valores dos parâmetros podem ser positivos e negativos. Um valor positivo ao longo do eixo X desloca para a direita, um negativo - para a esquerda. Um valor positivo ao longo do eixo Y desloca para baixo, um negativo - para cima.

Sintaxe

seletor {
	transform: translate(deslocamento no eixo X, deslocamento no eixo Y);
}

Exemplo

Ao passar o mouse sobre o bloco, ele se deslocará 30px para a direita:

<div id="elem"></div>

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

Exemplo

Ao passar o mouse sobre o bloco, ele se deslocará 30px para a esquerda:

<div id="elem"></div>

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

Exemplo

Ao passar o mouse sobre o bloco, ele se deslocará 15px para a direita e 30px para baixo:

<div id="elem"></div>

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

Veja também

a função translateX,
que define o deslocamento ao longo do eixo X
a função translateY,
que define o deslocamento ao longo do eixo Y