Função translate

A função translate define o deslocamento de um elemento ao longo do eixo X e do eixo Y. É usada em conjunto com a propriedade transform. Os valores da propriedade podem ser quaisquer unidades de tamanho.

Pode receber um ou dois parâmetros. Se houver dois parâmetros - o primeiro define o deslocamento ao longo do eixo X, e o segundo - ao longo do eixo Y. Se houver um único parâmetro, ele define o deslocamento ao longo do eixo X.

Os valores dos parâmetros podem ser positivos e negativos. Um valor positivo ao longo do eixo X desloca para a direita, um negativo - para a esquerda. Um valor positivo ao longo do eixo Y desloca para baixo, um negativo - para cima.

Sintaxe

cssseletor {
  transform: translate(deslocamento no eixo X, deslocamento no eixo Y);
}

Exemplo

Ao passar o mouse sobre o bloco, ele se deslocará 30px para a direita:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translate(30px);
}

Результат:

Exemplo

Ao passar o mouse sobre o bloco, ele se deslocará 30px para a esquerda:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translate(-30px);
}

Результат:

Exemplo

Ao passar o mouse sobre o bloco, ele se deslocará 15px para a direita e 30px para baixo:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translate(15px, 30px);
}

Результат:

Veja também