Translação de Elementos para Efeitos Dinâmicos
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_valuecorresponde ao deslocamento no eixo x. Um valor positivo move o elemento para a direita, enquanto um valor negativo move para a esquerda;Y_valuecorresponde ao deslocamento no eixo y. Um valor positivo move o elemento para baixo, e um valor negativo move para cima;Z_valuecorresponde 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()etranslateY()- 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:
index.html
index.css
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:
index.html
index.css
Provavelmente você possui uma tela 2D assim como eu, e não conseguimos perceber o deslocamento ao longo do eixo z.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you show an example of how translate3d() works in CSS?
What are some practical uses for translateZ() or translate3d() today?
How does translate3d() differ from using translate() with three values?
Incrível!
Completion taxa melhorada para 2.08Translação de Elementos para Efeitos Dinâmicos
Deslize para mostrar o menu
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_valuecorresponde ao deslocamento no eixo x. Um valor positivo move o elemento para a direita, enquanto um valor negativo move para a esquerda;Y_valuecorresponde ao deslocamento no eixo y. Um valor positivo move o elemento para baixo, e um valor negativo move para cima;Z_valuecorresponde 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()etranslateY()- 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:
index.html
index.css
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:
index.html
index.css
Provavelmente você possui uma tela 2D assim como eu, e não conseguimos perceber o deslocamento ao longo do eixo z.
Obrigado pelo seu feedback!
