translateY()

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since julio de 2015.

Learn more
See full compatibility

La funcin 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 traslacin. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad transform-box.

Coordenadas cartesianas en 2	Coordenadas homogneas en 2	Coordenadas cartesianas en 3	Coordenadas homogneas en 3
Una traslacin no es una transformacin linear en 2 y no puede ser representada usando una matriz de coordenada cartesiana.	10001t001	10001t001	1000010t00100001
	`[1 0 0 1 0 t]`	10001t001	1000010t00100001

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, vase el tipo <transform-function> para informacin de compatibilidad.

Vase tambin

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 31 mar 2026 by MDN contributors.

View this page on GitHub Report a problem with this content

translateY()

In this article

Help improve MDN