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 (en-US) 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(<length-percentage> (en-US))

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

Siehe auch