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 (en-US).

Coordenadas cartesianas en ℝ2 Coordenadas homogéneas en ℝℙ2 Coordenadas cartesianas en ℝ3 Coordenadas homogéneas en ℝℙ3

Una traslación no es una transformación linear en ℝ2 y no puede ser representada usando una matriz de coordenada cartesiana.

1 0 0 0 1 t 0 0 1 1 0 0 0 1 t 0 0 1 1 0 0 0 0 1 0 t 0 0 1 0 0 0 0 1
[1 0 0 1 0 t]

Sintaxis formal

translateY(<length-percentage> (en-US))

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.

Véase también