matrix()

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 matrix()-Funktion in CSS definiert eine homogene 2D-Transformationsmatrix. Ihr Ergebnis ist ein <transform-function> Daten-Typ.

Probieren Sie es aus

Note: matrix(a, b, c, d, tx, ty) ist eine Kurzschreibweise für matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Syntax

Die matrix()-Funktion wird mit sechs Werten festgelegt. Die konstanten Werte sind impliziert und werden nicht als Parameter übergeben; die anderen Parameter werden in der spaltenweisen Reihenfolge beschrieben.

css
matrix(a, b, c, d, tx, ty)

Werte

a b c d

Sind <number>-Werte, die die lineare Transformation beschreiben.

tx ty

Sind <number>-Werte, die die anzuwendende Translation beschreiben.

Kartesische Koordinaten im ℝ^2 Homogene Koordinaten im ℝℙ^2 Kartesische Koordinaten im ℝ^3 Homogene Koordinaten im ℝℙ^3
(acbd)\begin{pmatrix} a & c \\ b & d \end{pmatrix}
(actxbdty001)\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)
(actxbdty001)\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)
(ac0txbd0ty00100001)\left( \begin{array}{cccc} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right)
[a b c d tx ty]

Die Werte repräsentieren die folgenden Funktionen: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

Formale Syntax

<matrix()> = 
matrix( <number>#{6} )

Beispiele

HTML

html
<div>Normal</div>
<div class="changed">Changed</div>

CSS

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

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
matrix()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch