Функión translate

La función translate define el desplazamiento de un elemento a lo largo del eje X y del eje Y. Se utiliza junto con la propiedad transform. Los valores de la propiedad pueden ser cualquier unidad de tamaño.

Puede aceptar uno o dos parámetros. Si hay dos parámetros, el primero define el desplazamiento a lo largo del eje X, y el segundo, a lo largo del eje Y. Si hay un solo parámetro, este define el desplazamiento a lo largo del eje X.

Los valores de los parámetros pueden ser positivos y negativos. Un valor positivo en el eje X desplaza hacia la derecha, uno negativo hacia la izquierda. Un valor positivo en el eje Y desplaza hacia abajo, uno negativo hacia arriba.

Sintaxis

cssselector {
  transform: translate(desplazamiento en el eje X, desplazamiento en el eje Y);
}

Ejemplo

Si pasas el cursor del ratón sobre el bloque, este se desplazará 30px hacia la derecha:

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

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

Результат:

Ejemplo

Si pasas el cursor del ratón sobre el bloque, este se desplazará 30px hacia la izquierda:

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

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

Результат:

Ejemplo

Si pasas el cursor del ratón sobre el bloque, este se desplazará 15px hacia la derecha y 30px hacia abajo:

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

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

Результат:

Véase también