translate3d()

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.

translate3d(tx, ty, tz)

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.

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

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

• translate
• translateY()
• translateX() (en-US)
• transform
• <transform-function>