CSS matrix3d() funktion

Definition och användning

CSS matrix3d() Funktionen definieren dreidimensionale Transformationen durch Verwendung einer 4x4-Matrix mit 16 Werten:

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

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;
}

Versök själv

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);
}

Versök själv

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