--- title: translateX() slug: Web/CSS/transform-function/translateX tags: - CSS - CSS Funktion - CSS Tranformation - Funktion - Referenz translation_of: Web/CSS/transform-function/translateX ---

Die CSS-Funktion translateX() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

Hinweis: translateX(tx) ist dasselbe wie translate(tx, 0) oder translate3d(tx, 0, 0).

Syntax

/* <length-percentage> values */
transform: translateX(200px);
transform: translateX(50%);

Werte

<length-percentage>: Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.

Kartesische Koordinaten auf ℝ²	Homogene Koordinaten auf ℝℙ²	Kartesische Koordinaten auf ℝ³	Homogene Koordinaten auf ℝℙ³
Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.	$(\begin{matrix} 1 & 0 & t \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & t \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & t \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 t 0]`

Formale Syntax

translateX({{cssxref("<length-percentage>")}})

Beispiel

HTML

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateX(10px); /* Equal to translate(10px) */
  background-color: pink;
}

Ergebnis

Spezifikation

Spezifikation	Status	Kommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}	{{Spec2("CSS3 Transforms")}}	Ursprüngliche Definition

Browser-Kompatibilität

Siehe auch

{{cssxref("translate")}}
translateY()
translateZ()
translate3d()
{{cssxref("transform")}}
{{cssxref("<transform-function>")}}