translate3d()

Die CSS-Eigenschaften translate3d() positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein <transform-funktion> Datentyp.

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. 100tx010ty001tz0001

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

Siehe auch