CSS matrix3d() functie

Definitie en gebruik

CSS matrix3d() De functie definieert een driedimensionale transformatie door gebruik te maken van een 4x4-matrix met 16 waarden:

matrix3d() =　　　
a1 a2 a3 a4
b1 b2 b3 b4
c1 c2 c3 c4
d1 d2 d3 d4

Voorbeeld

Voorbeeld 1

Gebruik matrix3d() Definieer een driedimensionale transformatie voor een <div>-element:

.div1 {
  transform: matrix3d(
    0.7, 0.1, 0.7, 0
    -0.6, 0.7, 0.2, 0
    -0.5, -0.8, 0.7, 0
    10, 10, 0, 1
  );
  lettergrootte: 30px;
  vet: zwaar;
  breedte: 280px;
  vulling: 10px;
  achtergrond: beige;
  lettertype: verdana;
  rand: 1px vastgezet groen;
}

Probeer het zelf

Voorbeeld 2

Gebruik matrix3d() Maak een driedimensionale transformatie voor een ander <div>-element aan:

.div1 {
  lettergrootte: 30px;
  vet: zwaar;
  breedte: 280px;
  hoogte: 40px;
  vulling: 10px;
  achtergrond: beige;
  lettertype: verdana;
  rand: 1px vastgezet groen;
  transform-style: behoud 3d;
  overgang: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  marge: 50px auto;
}
.div1:hover {
.div1:focus {
  transform: rotate3d(1, 1, 1, 30deg);
  matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

Probeer het zelf

CSS syntaxis

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Waarde Beschrijving
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 Verplicht. Definieer het getal dat de lineaire transformatie represents.
a4 b4 c4 d4 Verplicht. Definieer het getal dat de toepasselijke transformatie represents.

Technische details

Versie: CSS Transforms Module Level 2

Browserondersteuning

Tafels van de cijfers geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Gerelateerde pagina's

Referentie:CSS transform eigenschap

Referentie:CSS matrix() functie

Tutorieel:CSS 3D transformatie