--- title: translate() slug: Web/CSS/transform-function/translate tags: - CSS - CSS Function - CSS Transforms - Función CSS - Referencia translation_of: Web/CSS/transform-function/translate() original_slug: Web/CSS/transform-function/translate() ---
{{CSSRef}}

La function de CSS translate() recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo {{cssxref("<transform-function>")}}.

Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.

Sintaxis

La function translate() esta especificada con uno o dos valores.

translate(tx)

translate(tx, ty)

Valores

tx
Es un {{cssxref("<length>")}} que representa la absisa (coordenada x) del vector de translación.
ty
Es un {{cssxref("<length>")}} que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, translate(2) es equivalente a translate(2, 0).
Coordenadas cartesianas en ℝ2 Coordenadas homogeneas en ℝℙ2

Coordenadas cartesianas en ℝ3

 Coordenadas homogeneas en ℝℙ3

Una translación no es una transformación lineal en ℝ2 y no puede ser representada usando una matriz de coordenadas cartesianas.

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

Ejemplos

Translación en un solo eje

HTML

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

CSS

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

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

Resultado

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

Translación combinada en los ejes X e Y

HTML

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

CSS

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

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

Resultado

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

Especificaciones

Especificación Estado Comentario
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}} {{Spec2('CSS3 Transforms')}} Definición inicial

Compatibilidad con navegadores

Ver el tipo de datos <transform-function> para la información de compatibilidad.

Véase también