Recomendação de curso:

Função CSS translateY()

Definição e uso do CSS translateY() função permite que você repositione o elemento ao longo do eixo y (direção vertical).

translateY() função no transform usado na propriedade.

Exemplo

Reposicionamento vertical de diferentes elementos <div>:

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

Experimente você mesmo

Sintaxe CSS

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

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 pela primeira vez.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Páginas relacionadas

Tutorial:Transformações 2D CSS

Referência:A propriedade CSS transform

Referência:A função CSS translate()

Referência:A função CSS translateX()

Referência:A propriedade HTML DOM transform