translateY()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

DietranslateY()-Funktion vonCSS repositioniert ein Element vertikal auf der 2D-Ebene. Das Ergebnis ist ein<transform-function>-Datentyp.

Probieren Sie es aus

transform: translateY(0);

transform: translateY(42px);

transform: translateY(-2.1rem);

transform: translateY(3ch);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" />  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

#static-element {  opacity: 0.4;  position: absolute;}#example-element {  position: absolute;}

Hinweis:translateY(ty) ist gleichbedeutend mittranslate(0, ty) odertranslate3d(0, ty, 0).

Syntax

css

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

Werte

<length-percentage>: Der Wert ist ein<length> oder<percentage>, der die Ordinate (vertikale, y-Koordinate) des Translation-Vektors [0, ty] repräsentiert. Imkartesischen Koordinatensystem stellt es die Verschiebung entlang der y-Achse dar. Ein Prozentwert bezieht sich auf die Höhe der durch dietransform-box-Eigenschaft definierten Referenzbox.

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 Matrix in kartesischen Koordinaten dargestellt werden.	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & t \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix}) \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]`

Formale Syntax

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

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

Beispiele

HTML

html

<div>Static</div><div>Moved</div><div>Static</div>

CSS

css

div {  width: 60px;  height: 60px;  background-color: skyblue;}.moved {  transform: translateY(10px);  background-color: pink;}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換

translateY()

Help improve MDN