translate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die translate() CSS Funktion verschiebt ein Element in die horizontale und/oder vertikale Richtung. Das Ergebnis ist ein Datentyp.

Probieren Sie es aus

transform: translate(0);

transform: translate(42px, 18px);

transform: translate(-2.1rem, -2ex);

transform: translate(3ch, 3mm);


  
  



#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

Diese Transformation wird durch einen zweidimensionalen Vektor [tx, ty] charakterisiert. Seine Koordinaten definieren, wie weit sich das Element in jede Richtung bewegt.

Syntax

css
/* Single  values */
transform: translate(200px);
transform: translate(50%);

/* Double  values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

Werte

Einzelner Wert

Dieser Wert ist ein oder , der die Abszisse (horizontal, x-Komponente) des Verschiebungsvektors [tx, 0] darstellt. Die Ordinate (vertikal, y-Komponente) des Verschiebungsvektors wird auf 0 gesetzt. Zum Beispiel ist translate(2px) gleichwertig mit translate(2px, 0). Ein Prozentwert bezieht sich auf die Breite des durch die transform-box Eigenschaft definierten Referenzrahmens.

Doppelter Wert

Dieser Wert beschreibt zwei oder Werte, die sowohl die Abszisse (horizontal, x-Komponente) als auch die Ordinate (vertikal, y-Komponente) des Verschiebungsvektors [tx, ty] darstellen. Ein Prozent als erster Wert bezieht sich auf die Breite, als zweiter Teil auf die Höhe des durch die transform-box Eigenschaft definierten Referenzrahmens.

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 mithilfe einer kartesischen Matrix dargestellt werden.

(10tx01ty001)\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)
(10tx01ty001)\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)
(100tx010ty00100001)\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
[1 0 0 1 tx ty]

Formale Syntax

 = 
  translate(  , ? )  

 = 
        |

Beispiele

Verwendung einer einachsigen Translation

HTML

html
Static


Moved


Static

CSS

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

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

Ergebnis

Kombination von y-Achsen- und x-Achsen-Translation

HTML

html
Static


Moved


Static

CSS

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

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}

Ergebnis

Spezifikationen

Specification
CSS Transforms Module Level 1
# funcdef-transform-translate

Browser-Kompatibilität

Siehe auch