CSS matrix() funktion

Definition og brug

CSS' matrix() Funktionen definerer en to-dimensionel transformation ved hjælp af en seks værdierig matrix.

matrix() Funktionen accepterer seks parametre, som giver dig mulighed for at rotere, skalere, flytte og skæve elementer.

Parameterne er som følger: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

Eksempel

Eksempel 1

Brug matrix() Definer to-dimensionelle transformationer for flere <div>-elementer:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Prøv det selv

Eksempel 2

Brug matrix() Opret to-dimensionelle transformationer for billeder:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Prøv det selv

CSS syntaks

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Tekniske detaljer

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne funktion.

Relaterede sider

Reference:CSS transform egenskab

Reference:CSS matrix3d() funktion

Vejledning:CSS 2D transformation