Función CSS translate()

Definición y uso

CSS translate() La función permite cambiar la posición del elemento.

translate() La función se encuentra en transform usado en la propiedad.

Ejemplo

Cambiar la posición del elemento:

#myDiv1 {
  transform: translate(50px); /* Mueve el elemento 50px a lo largo del eje x y 0px a lo largo del eje y */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Mueve el elemento 50px a lo largo del eje x y 20px a lo largo del eje y */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Mueve el elemento 100px a lo largo del eje x y 30px a lo largo del eje y */
}

Prueba por ti mismo

Sintaxis CSS

translate(x, y)
Valor Descripción
x Obligatorio. Define la distancia de desplazamiento del elemento a lo largo del eje x, que puede ser un número o un porcentaje.
y

Opcional. Define la distancia de desplazamiento del elemento a lo largo del eje y, que puede ser un número o un porcentaje.

Si se omite, el valor se establece en 0.

Detalles técnicos

Versión: Módulo de Transformaciones CSS Nivel 1

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Páginas relacionadas

Tutoriales:Transformaciones 2D CSS

Referencia:Atributo CSS transform

Referencia:Función CSS translateX()

Referencia:Función CSS translateY()

Referencia:Atributo CSS HTML DOM transform