`matrix()` CSS-Funktion

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die matrix() CSS Funktion definiert eine homogene 2D-Transformationsmatrix. Ihr Ergebnis ist ein <transform-function> Datentyp.

Hinweis: Die Funktion matrix(a, b, c, d, tx, ty) ist eine Kurzschreibweise fr matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Probieren Sie es aus

transform: matrix(1.2, 0.2, -1, 0.9, 0, 20);

transform: matrix(0.4, 0, 0.5, 1.2, 60, 10);

transform: matrix(0, 1, 1, 0, 0, 0);

transform: matrix(0.1, 1, -0.3, 1, 0, 0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

css

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

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

a b c d: Sind <number>s, die die lineare Transformation beschreiben.
tx ty: Sind <number>s, die die anzuwendende Translation beschreiben.

Kartesische Koordinaten auf ^2	Homogene Koordinaten auf ^2	Kartesische Koordinaten auf ^3	Homogene Koordinaten auf ^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)
(acbd)\begin{pmatrix} a & c \\ b & d \end{pmatrix}	`[a b c d tx ty]`

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

Formale Syntax

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

Diese Syntax spiegelt den neuesten Standard gem CSS Transforms Module Level 1 wider. Mglicherweise haben nicht alle Browser jeden Teil implementiert. Siehe Browserkompatibilitt fr Informationen zur Untersttzung.

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

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

Browser-Kompatibilitt

Siehe auch

transform
Individuelle Transformations-Eigenschaften:
<transform-function>
matrix3d()

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden

matrix() CSS-Funktion

In diesem Artikel

Help improve MDN

`matrix()` CSS-Funktion