translate() e translateZ() permitem mover um elemento de sua posição original em uma direção específica em relação à sua posição atual. Essas funções fazem parte da propriedade CSS transform. Além disso, é possível utilizar translateX() e translateY() para mover um elemento apenas horizontalmente ou verticalmente.

transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);

• translate() - aceita até 3 valores;
  • X_value corresponde ao deslocamento no eixo x. Um valor positivo move o elemento para a direita, enquanto um valor negativo move para a esquerda;
  • Y_value corresponde ao deslocamento no eixo y. Um valor positivo move o elemento para baixo, e um valor negativo move para cima;
  • Z_value corresponde ao deslocamento no eixo z. Um valor positivo aproxima o elemento do observador, e um valor negativo o afasta. Se apenas 1 ou 2 valores forem especificados, o navegador aplica o(s) mesmo(s) valor(es) para o(s) eixo(s) ausente(s).
• translateX() e translateY() - aceitam 1 valor cada;
  • translateX(value) especifica o deslocamento horizontal. Um valor positivo move o elemento para a direita, e um valor negativo move para a esquerda;
  • translateY(value) especifica o deslocamento vertical. Um valor positivo move o elemento para baixo, e um valor negativo move para cima.
• translateZ() - aceita 1 valor. Especifica o deslocamento no eixo z, podendo criar transformações 3D. Um valor positivo aproxima o elemento do observador, e um valor negativo o afasta.

Vamos conferir o que é possível alcançar com a ajuda dessas funções:

Propriedade translate3d()

Também é possível adicionar deslocamento de elementos em 3D com o auxílio de uma única propriedade. No entanto, geralmente, os usuários possuem telas 2D, e esse movimento 3D será invisível. Ao mesmo tempo, cada vez mais usuários buscam experimentar a realidade 3D. Em breve, a maioria dos usuários terá telas com três dimensões, tornando essa propriedade útil. A sintaxe é a seguinte:

transform: translate3d(X_value, Y_value, Z-value);

O deslocamento no eixo z é adicionado como o último valor. Um valor positivo representa movimento na direção para frente do usuário. Um valor negativo representa movimento na direção para trás do usuário.

Veja o exemplo:

Provavelmente você possui uma tela 2D assim como eu, e não conseguimos perceber o deslocamento ao longo do eixo z.