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 positioniert ein Element vertikal auf der 2D-Ebene neu. Das Ergebnis ist ein <transform-function>
Datentyp.
Probieren Sie es aus
Hinweis: translateY(ty)
ist gleichwertig mit
translate(0, ty)
oder
translate3d(0, ty, 0)
.
Syntax
/* <length-percentage> values */
transform: translateY(200px);
transform: translateY(50%);
Werte
<length-percentage>
-
Der Wert ist eine
<length>
oder<percentage>
, die die Ordinate (vertikal, y-Koordinate) des Übersetzungsvektors [0, ty] darstellt. Im kartesischen Koordinatensystem stellt es die Verschiebung entlang der y-Achse dar. Ein Prozentwert bezieht sich auf die Höhe des von dertransform-box
Eigenschaft definierten Referenzrahmens.
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 mithilfe einer kartesischen Koordinaten-Matrix dargestellt werden. |
|
|
|
[1 0 0 1 0 t] |
Formale Syntax
<translateY()> =
translateY( <length-percentage> )
<length-percentage> =
<length> |
<percentage>
Beispiele
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
Spezifikationen
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-translatey |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
translateY() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support