Функ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

selector {
	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:

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

#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:

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

#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:

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

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

Véase también

la función translateX,
que define el desplazamiento a lo largo del eje X
la función translateY,
que define el desplazamiento a lo largo del eje Y