Die CSS-Eigenschaften translate3d()
positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein <transform-funktion>
Datentyp.
Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns eine Pull-Anfrage.
Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.
Syntax
translate3d(tx, ty, tz)
Werte
tx
- Ist ein
<länge>
oder<prozentsatz>
, das die Abszisse des Verschiebungsvektors darstellt. ty
- Ist ein
<länge>
oder<prozentsatz>
, das die Ordinate des Verschiebevektors darstellt. tz
- Ist ein
<länge>
, der die z-Komponente des Verschiebungsvektors darstellt.
Es kann kein<prozentwert>
-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.
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 in der Ebene dargestellt werden. |
Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. |
Beispiele
Verwendung einer einachsigen Verschiebung
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
Kombinierte Z-Achsen- und X-Achsen-Verschiebung
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
Spezifikation
Spezifikation | Status | Kommentar |
---|---|---|
CSS Transforms Level 2 Die Definition von 'translate3d()' in dieser Spezifikation. |
Bearbeiterentwurf | Ursprüngliche Definition |
Browser-Kompatibilität
BCD tables only load in the browser
Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.