As funções translate() e translateZ() nos permitem mover um elemento de sua posição original em uma direção específica relativa à sua posição atual. Essas funções fazem parte da propriedade transform do CSS. Além disso, podemos usar translateX() e translateY() para mover um elemento apenas horizontal ou verticalmente.

• translate() - aceita até 3 valores.
  • X_value é o movimento ao longo do eixo x. Um valor positivo move o elemento para a direita, enquanto que um valor negativo o move para a esquerda.
  • Y_value é o movimento ao longo do eixo y. Um valor positivo move o elemento para baixo e um valor negativo o move para cima.
  • Z_value é o movimento ao longo do eixo z. Um valor positivo move o elemento mais próximo do visualizador e um valor negativo o afasta. Se você especificar apenas 1 ou 2 valores, o navegador aplica o mesmo valor ou valores para o(s) eixo(s) que falta(m).
• translateX() e translateY() - aceitam 1 valor cada.
  • translateX(value) especifica o movimento horizontal. Um valor positivo move o elemento para a direita e um valor negativo para a esquerda.
  • translateY(value) especifica o movimento vertical. Um valor positivo move o elemento para baixo e um valor negativo para cima.
• translateZ() - aceita 1 valor. Especifica o movimento ao longo do eixo z, o que pode criar transformações em 3D. Um valor positivo move o elemento mais próximo do visualizador e um valor negativo o afasta.

Vamos verificar o que podemos alcançar com a ajuda dessas funções:

Propriedade translate3d()

Também podemos adicionar deslocamento de elemento 3d com a ajuda de uma propriedade. No entanto, geralmente, os usuários possuem telas 2d e esse movimento 3d ficará invisível. Ao mesmo tempo, mais e mais usuários estão tentando sentir a realidade 3d. Então, em breve, a maioria dos usuários terá telas de três dimensões, e essa propriedade será útil. A sintaxe é a seguinte:

Adicionamos o deslocamento do eixo z como o último valor. Um valor positivo é um movimento na direção para frente do usuário. Um valor negativo é um movimento na direcção para trás do usuário.

Vamos verificar o exemplo:

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

Com a ajuda de qual função podemos mover o elemento do seu deslocamento original para baixo em 30px?

Selecione algumas respostas corretas