--- title: translateY() slug: Web/CSS/transform-function/translateY tags: - CSS - CSS Funktion - CSS Transfomation - Funktion - Referenz translation_of: Web/CSS/transform-function/translateY() original_slug: Web/CSS/transform-function/translateY() ---

Die CSS-Funktion translateY() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

Hinweis: translateY(ty) ist dasselbe wie translate(0, ty) oder translate3d(0, ty, 0).

Syntax

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

Werte

<length-percentage>: Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.

Kartesische Koordinaten auf ℝ²	Homogene Koordinaten auf ℝℙ²	Kartesische Koordinaten auf ℝ³	Homogene Koordinaten auf ℝℙ³
Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.	$(\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]`

Formale Syntax

translateY({{cssxref("<length-percentage>")}})

Beispiel

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;
}

Ergebnis

Spezifikation

Spezifikation	Status	Kommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}	{{Spec2("CSS3 Transforms")}}	Ursprüngliche Definition