Recommandation de cours :

Page précédente Fonction log() CSS
Page suivante Fonction matrix3d() CSS
Retour au niveau supérieur Manuel de fonctions CSS

Définition et utilisation de la fonction matrix() CSS

Définition et utilisation de CSS matrix() La fonction définit une transformation bidimensionnelle à l'aide d'un matrice contenant six valeurs.

matrix() La fonction accepte six paramètres qui permettent d'effectuer des opérations de rotation, d'agrandissement, de déplacement et de décalage sur l'élément.

Les paramètres sont les suivants : matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

Exemple

Exemple 1

Utilisez matrix() Définir une transformation bidimensionnelle pour plusieurs éléments <div> :

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

Essayez-le vous-même

Exemple 2

Utilisez matrix() Créer une transformation bidimensionnelle pour l'image :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur	Description
scaleX()	Obligatoire. Numéro, utilisé pour redimensionner la largeur de l'élément.
skewY()	Obligatoire. Numéro (angle), utilisé pour effectuer une transformation de décalage le long de l'axe Y.
skewX()	Obligatoire. Numéro (angle), utilisé pour effectuer une transformation de décalage le long de l'axe X.
scaleY()	Obligatoire. Numéro, utilisé pour redimensionner la hauteur de l'élément.
translateX()	Obligatoire. Numéro, utilisé pour déplacer un élément le long de l'axe X.
translateY()	Obligatoire. Numéro, utilisé pour déplacer un élément le long de l'axe Y.