--- title: translate3d() slug: Web/CSS/transform-function/translate3d tags: - CSS - CSS Funktion - CSS Transformation - Funktion - Referenz translation_of: Web/CSS/transform-function/translate3d() original_slug: Web/CSS/transform-function/translate3d() ---
{{CSSRef}}

Die CSS-Eigenschaften translate3d() positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.

{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}

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 {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.
ty
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.
tz
Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.
Es kann kein {{cssxref("<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

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

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

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

Spezifikation

Spezifikation Status Kommentar
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}} {{Spec2("CSS Transforms 2")}} Ursprüngliche Definition

Browser-Kompatibilität

{{Compat("css.types.transform-function")}}

Siehe auch