CSS matrix3d() funktion
- Föregående sida CSS matrix() funktion
- Nästa sida CSS max() funktion
- Gå tillbaka till föregående nivå CSS funktion referenshandbok
Definition och användning
CSS matrix3d()
Funktionen definieren dreidimensionale Transformationen durch Verwendung einer 4x4-Matrix mit 16 Werten:
matrix3d() = |
|
Exempel
Exempel 1
Använd matrix3d()
Definiera en dreidimensionell transformation för ett <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 ); teckensnittsstorlek: 30px; typvikt: fett; bredd: 280px; fyllning: 10px; bakgrund: beige; teckensnitt: verdana; kanter: 1px fast grön; }
Exempel 2
Använd matrix3d()
Erstelle eine dreidimensionale Transformation für ein anderes <div>-element:
.div1 { teckensnittsstorlek: 30px; typvikt: fett; bredd: 280px; höjd: 40px; fyllning: 10px; bakgrund: beige; teckensnitt: verdana; kanter: 1px fast grön; transform-style: behåll 3d; övergång: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); marginal: 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); }
CSS Syntax
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Wert | Beschreibung |
---|---|
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 | Erforderlich. Definiert die numerischen Werte der linearen Transformation. |
a4 b4 c4 d4 | Erforderlich. Definiert die numerischen Werte der anzuwendenden Transformation. |
Technische Details
Version: | CSS Transforms Modul Stufe 2 |
---|
Browser-Unterstützung
Tabellenzahlen zeigen die Versionsnummer des ersten Browsers, der diese Funktion vollständig unterstützt.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
12 | 12 | 10 | 4 | 15 |
Relaterade sidor
Referens:CSS transform egenskap
Referens:CSS matrix() funktion
Lärord:CSS 3D-omvandling
- Föregående sida CSS matrix() funktion
- Nästa sida CSS max() funktion
- Gå tillbaka till föregående nivå CSS funktion referenshandbok