translateY()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

La función translateY() de CSS reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo <transform-function>.

Nota: translateY(ty) es equivalente a translate(0, ty) o translate3d(0, ty, 0).

Sintaxis

css

/* <length-percentage> values */
transform: translateY(200px);
transform: translateY(50%);

Valores

<length-percentage>: El valor es de tipo <length> o <percentage>, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad transform-box.

Coordenadas cartesianas en ℝ²	Coordenadas homogéneas en ℝℙ²	Coordenadas cartesianas en ℝ³	Coordenadas homogéneas en ℝℙ³
Una traslación no es una transformación linear en ℝ²y no puede ser representada usando una matriz de coordenada cartesiana.	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & t \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 0 t]`

Sintaxis formal

translateY(<length-percentage>)

Ejemplos

HTML

html

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

css

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

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

Resultado

Especificaciones

Specification
CSS Transforms Module Level 1 # funcdef-transform-translatey

Compatibilidad de navegadores

Por favor, véase el tipo <transform-function> para información de compatibilidad.