A função translate() do CSS reposiciona um elemento nas direções horizontal e/ou vertical. O resultado é um tipo de dado <transform-function>.

Essa transformação é caracterizada por um vetor bidimensional. Suas cordenadas definem o quanto o elemento se move para cada direção.

Sintaxe

A função translate() é especificada por um ou dois valores.

translate(tx)

translate(tx, ty)

Valores

tx
É um <length> representando a abscissa (coordenada-x) do vetor.
ty
É um <length> representando a ordenação do vetor (ou coordenada-y). Se não especificado, o valor padrão é 0. Por exemplo,  translate(2) equivale a translate(2, 0).
Coordenadas cartesianas em ℝ2 Coordenadas homogêneas em ℝℙ2 Coordenadas cartesianas em ℝ3 Coordenadas homogêneas em ℝℙ3

Um translação não é uma transformação linear em ℝ2 e não pode ser representada usando uma matriz de Coordenada cartesiana.

10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]

Exemplos

Usando uma transformação único eixo

HTML

<div>Estático</div>
<div class="movido">Movido</div>
<div>Estático</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.movido {
  transform: translate(10px); /* Igual a translateX(10px) */
  background-color: pink;
}

Resultado

Combinando transformações eixo y e eixo x

HTML

<div>Estático</div>
<div class="movido">Movido</div>
<div>Estático</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.movido {
  transform: translate(10px, 10px);
  background-color: pink;
}

Resultado

Compatibilidade dos navegadores

Por favor veja o tipo de dado  <transform-function> para informações de compatibilidade.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: brunoeduardo
 Última atualização por: brunoeduardo,