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ürmatrix3d(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.
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 |
---|---|---|---|
|
|
|
|
[a b c d tx ty] |
Die Werte repräsentieren die folgenden Funktionen:
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
.
Formale Syntax
Beispiele
HTML
<div>Normal</div>
<div class="changed">Changed</div>
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
matrix() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
Siehe auch
transform
- Einzelne Transformations-Eigenschaften:
<transform-function>
matrix3d()