Recommandation de cours :

Fonction matrix3d() CSS

Définition et utilisation de matrix3d() La fonction définit une transformation 3D en utilisant une matrice 4x4 contenant 16 valeurs :

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

Exemple

Exemple 1

Utiliser matrix3d() Définir une transformation 3D pour un élément <div> :

.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
  );
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
}

Essayer par vous-même

Exemple 2

Utiliser matrix3d() Créer une transformation 3D pour un autre élément <div> :

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 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);
}

Essayer par vous-même

Syntaxe CSS

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Valeur Description
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 Obligatoire. Définir le nombre de la transformation linéaire.
a4 b4 c4 d4 Obligatoire. Définir le nombre de la transformation à appliquer.

Détails techniques

Version : Module de transformations CSS niveau 2

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Pages associées

Référence :propriété transform CSS

Référence :fonction matrix() CSS

Tutoriel :Transformation 3D CSS