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.

Die translateY() CSS Funktion verschiebt ein Element vertikal auf der 2D-Ebene. Das Ergebnis ist ein <transform-function> Datentyp.

Hinweis: translateY(ty) entspricht translate(0, ty) oder translate3d(0, ty, 0).

css

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

<length-percentage>: Der Wert ist ein <length> oder <percentage>, der die Ordinate (vertikale, y-Koordinate) des Verschiebungsvektors [0, ty] darstellt. Im kartesischen Koordinatensystem repräsentiert er die Verschiebung entlang der y-Achse. Ein Prozentwert bezieht sich auf die Höhe des Referenzrahmens, der durch die transform-box Eigenschaft definiert wird.

Kartesische Koordinaten auf ℝ^2	Homogene Koordinaten auf ℝℙ^2	Kartesische Koordinaten auf ℝ^3	Homogene Koordinaten auf ℝℙ^3
Eine Translation ist keine lineare Transformation in ℝ^2 und kann nicht mit einer kartesischen Koordinaten-Matrix dargestellt werden.	$\left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & t \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 0 0 1 0 t]`

<translateY()> = 
  translateY( <length-percentage> )  

<length-percentage> = 
  <length>      |
  <percentage>

html

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

css

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

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

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

BCD tables only load in the browser