Transform 2D — Translate

Essa transformação causa a translação de um elemento ao longo dos eixos x e/ou y.
Valores positivos de x expressam deslocamento para a direita e valores positivos de y deslocamento para baixo. Valores negativos expressam deslocamento em sentido contrário ao descrito

A sintaxe geral para aplicar uma translação é mostrada a seguir, onde x e y são valores expressos em unidades de medida CSS.

  seletor { transform: translate(x, y); } 
  seletor { transform: translateX(x); } 
  seletor { transform: translateY(y); } 

Interativo

Acione os sliders para visualizar a translação em ação

seletor {
  -webkit-transform: translate(px, px);
  -moz-transform: translate(px, px);
  -o-transform: translate(px, px);
  -ms-transform: translate(px, px);
  transform: translate(px, px);
}