Função CSS translate()

Definição e uso

CSS translate() A função permite que você altere a posição do elemento.

translate() A função está em transform usado na propriedade.

Exemplo

Alterar a posição do elemento:

#myDiv1 {
  transform: translate(50px); /* Move o elemento 50px ao longo do eixo x e 0px ao longo do eixo y */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Move o elemento 50px ao longo do eixo x e 20px ao longo do eixo y */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Move o elemento 100px ao longo do eixo x e 30px ao longo do eixo y */
}

Experimente você mesmo

Sintaxe CSS

translate(x, y)
Valor Descrição
x Obrigatório. Define a distância de movimento do elemento ao longo do eixo x, que pode ser um número ou uma porcentagem.
y

Opcional. Define a distância de movimento do elemento ao longo do eixo y, que pode ser um número ou uma porcentagem.

Se omitido, o valor é definido como 0.

Detalhes técnicos

Versão: Módulo de Transformações CSS Nível 1

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Páginas relacionadas

Tutorial:Transformações 2D CSS

Referência:Propriedade transform do CSS

Referência:Função translateX() do CSS

Referência:Função translateY() do CSS

Referência:Propriedade transform do HTML DOM