translateY()

Die CSS-Funktion translateY() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein <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 <length> oder <percentage> , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft transform-box (en-US) definiert ist.
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 durch eine kartesische Koordinatenmatrix dargestellt werden.

10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]

Formale Syntax

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

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
CSS Transforms Level 1
Die Definition von 'translateX()' in dieser Spezifikation.
Arbeitsentwurf Ursprüngliche Definition

Browser-Kompatibilität

BCD tables only load in the browser

See also