translate3d()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Die translate3d()
CSS Funktion positioniert ein Element im 3D-Raum neu. Das Ergebnis ist ein <transform-function>
Datentyp.
Probieren Sie es aus
Diese Transformation wird durch einen dreidimensionalen Vektor [tx, ty, tz] charakterisiert. Ihre Koordinaten definieren, wie stark das Element in jede Richtung bewegt wird.
Syntax
translate3d(tx, ty, tz)
Werte
tx
-
Ist ein
<length>
oder<percentage>
, das die Abszisse (horizontale, x-Komponente) des Transformationsvektors [tx, ty, tz] darstellt. ty
-
Ist ein
<length>
oder<percentage>
, das die Ordinate (vertikale, y-Komponente) des Transformationsvektors [tx, ty, tz] darstellt. tz
-
Ist ein
<length>
, das die z-Komponente des Transformationsvektors darstellt. Sie kann kein<percentage>
Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet [tx, ty, tz].
Kartesische Koordinaten auf ℝ^2 | Homogene Koordinaten auf ℝℙ^2 | Kartesische Koordinaten auf ℝ^3 | Homogene Koordinaten auf ℝℙ^3 |
---|---|---|---|
Diese Transformation gilt für den 3D-Raum und kann nicht auf der Ebene dargestellt werden. |
Eine Translation ist keine lineare Transformation in ℝ^3 und kann nicht mit einer kartesischen Koordinatenmatrix dargestellt werden. |
Beispiele
Verwenden einer einachsigen Translation
HTML
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
/* Equivalent to perspective(500px) translateX(10px) */
transform: perspective(500px) translate3d(10px, 0, 0px);
background-color: pink;
}
Ergebnis
Kombination von z-Achsen- und x-Achsen-Translation
HTML
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Transforms Module Level 2 # funcdef-translate3d |
Browser-Kompatibilität
BCD tables only load in the browser