translateX()

Die CSS-Funktion translateX() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein <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 <length> oder <percentage> , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft 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(<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
CSS Transforms Level 1 Die Definition von 'translateX()' in dieser Spezifikation.	Arbeitsentwurf	Ursprüngliche Definition

Browser-Kompatibilität

BCD tables only load in the browser