translate()

Baseline Widely available

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

Die translate() CSS Funktion versetzt ein Element in horizontaler und/oder vertikaler Richtung. Ihr Ergebnis ist ein <transform-function> Datentyp.

Probieren Sie es aus

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

Syntax

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

/* Double <length-percentage> values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

Werte

Einzelne <length-percentage> Werte

Dieser Wert ist ein <length> oder <percentage>, der die Abszisse (horizontaler, x-Komponente) des Verschiebungsvektors [tx, 0] darstellt. Die Ordinate (vertikal, y-Komponente) des Verschiebungsvektors wird auf 0 gesetzt. Zum Beispiel entspricht translate(2px) dem translate(2px, 0). Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft transform-box definiert wird.

Doppelte <length-percentage> Werte

Dieser Wert beschreibt zwei <length> oder <percentage> Werte, die sowohl die Abszisse (horizontal, x-Komponente) als auch die Ordinate (vertikal, y-Komponente) des Verschiebungsvektors [tx, ty] darstellen. Ein Prozentsatz als erster Wert bezieht sich auf die Breite, als zweiter Teil auf die Höhe der Referenzbox, die durch die Eigenschaft transform-box definiert wird.

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 mittels einer kartesischen Koordinatenmatrix 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(<length-percentage>, <length-percentage>?)

Beispiele

Verwendung einer einachsigen Translation

HTML

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

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
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

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

BCD tables only load in the browser

Siehe auch