Recomendação de curso:

Função CSS translateX()

Definição e uso do CSS translateX() Permite que você repositione o elemento ao longo do eixo x (direção horizontal).

translateX() A função transform usado na propriedade.

Exemplo

Reposicionamento horizontal de diferentes elementos <div>:

#myDiv1 {
  transform: translateX(50px); /* Move o elemento ao longo do eixo x 50px */
}
#myDiv2 {
  transform: translateX(100px); /* Move o elemento ao longo do eixo x 100px */
}
#myDiv3 {
  transform: translateX(-10px); /* Move o elemento ao longo do eixo x -10px */
}

Experimente você mesmo

Sintaxe do CSS

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

Detalhes técnicos

Versão: Módulo de Transforms do CSS Level 1

Suporte do navegador

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

páginas relacionadas

Tutorial:Transformação 2D CSS

Referência:A propriedade CSS transform

Referência:Função CSS translate()

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

Referência:A propriedade transform do HTML DOM