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

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 ℝ2 Homogene Koordinaten auf ℝℙ2 Kartesische Koordinaten auf ℝ3 Homogene Koordinaten auf ℝℙ3

Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.

 10t010001 10t010001 100t010000100001
[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

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

Spezifikation

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

Browser-Kompatibilität

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

Siehe auch