translate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

A função CSS translate() reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado .

Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

Sintaxe

css

/* Valores  únicos */
transform: translate(200px);
transform: translate(50%);

/* Valores  duplos */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

Valores

Valores únicos: Este valor é um ou representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como 0. Por exemplo, translate(2) é equivalente a translate(2, 0). Um valor percentual refere-se à largura da caixa de referência definida pela propriedade transform-box.
Valores duplos: Este valor descreve dois ou valores representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade transform-box.

Coordenadas cartesianas em ℝ²	Coordenadas homogêneas emℝℙ²	Coordenadas cartesianas em ℝ³	Coordenadas homogêneas em ℝℙ³
Uma translação não é uma transformação linear em ℝ² e não pode ser representada usando uma matriz de coordenadas cartesianas.	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 tx ty]`

Sintaxe formal

translate( , ?)

Exemplos

Usando uma conversão de eixo único

HTML

html

Estático
Movido
Estático

CSS

css

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

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

Resultado

Combinando a translação do eixo y e do eixo x

HTML

html

Estático
Movido
Estático

CSS

css

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

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

Resultado

Especificações

Specification
CSS Transforms Module Level 1 # funcdef-transform-translate

Compatibilidade com navegadores

Verifique o tipo de dado para informações de compatibilidade.

Veja também

transform