matrix()

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

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>

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

Die matrix() Funktion wird mit sechs Werten angegeben. Die konstanten Werte werden implizit berücksichtigt und nicht als Parameter übergeben; die anderen Parameter werden in spaltenweisem Format beschrieben.

css

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

Werte

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
$\begin{pmatrix} a & c \\ b & d \end{pmatrix}$	$\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)$	$\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)$	$\left( \begin{array}{cccc} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right)$
$\begin{pmatrix} a & c \\ b & d \end{pmatrix}$	`[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;
}

matrix()

Probieren Sie es aus

Syntax

Werte

Formale Syntax

Beispiele

HTML

CSS

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

In diesem Artikel