Les matrix de transformation CSS
En CSS, la fonction matrix est utilisée avec la propriété CSS transform qui permet de spécifier une transformation :
- une transformation de type rotation.
- une transformation de type changement d'échelle.
- une transformation de type inclinaison.
- une transformation de type translation.
Faire une rotation à un élément HTML en CSS.
Alias fonction CSS rotate()
Pour faire une rotation en CSS, vous devez utiliser la matrice suivante :
transform : matrix(cos(angle), sin(angle), -sin(angle), cos(angle), 0 , 0);
cos(angle) est le cosinus de l'angle de rotation, sin(angle) est le sinus de l'angle de rotation.
La matrix CSS proposée ci-dessous n'est qu'une retranscription de la fonction CSS rotate( angle ).
.carre2{
transform : rotate(30deg)
}
.carre3{
transform : matrix(0.866025, 0.5, -0.5, 0.866025 ,0 , 0)
}
Incliner un élément HTML en CSS.
Alias la fonction CSS skew(), skewX() et skewY().
Pour incliner en CSS horizontalement et verticalement, vous devez utiliser la matrice suivante : transform : matrix(1, tan(angleY), tan(angleX), 1, 0, 0);
La matrix CSS proposée ci-dessous n'est qu'une retranscription sous forme de matrice de la fonction CSS skew( angleX, angleY ).
Pour incliner en CSS horizontalement et verticalement, vous devez utiliser la matrice suivante :
transform : matrix(1, 0, tan(angleX), 1, 0, 0);
La matrix CSS proposée ci-dessous n'est qu'une retranscription sous forme de matrice de la fonction CSS skewX( angleX ).
Pour incliner en CSS horizontalement et verticalement, vous devez utiliser la matrice suivante :
transform : matrix(1, tan(angleY), 0, 1, 0, 0);
La matrix CSS proposée ci-dessous n'est qu'une retranscription sous forme de matrice de la fonction CSS skewY( angleY ).
tan(angleX) est tangente de l'angle d'inclinaison horizontale et tan(angleY) est tangente de l'angle d'inclinaison verticale.
.carre2{
transform : skew(30deg, 30deg)
}
.carre3{
transform : matrix(1, 0.57735, 0.57735, 1, 0, 0)
}
.carre4{
transform : skewX(30deg)
}
.carre5{
transform : matrix(1, 0.57735, 0, 1, 0, 0)
}
.carre6{
transform : skewY(30deg)
}
.carre7{
transform : matrix(1, 0, 0.57735, 1, 0, 0)
}
Changer l'échelle d'un élément HTML en CSS.
Alias la fonction CSS scale(), scaleX() et scaleY().
Pour faire une réduction en CSS ou un agrandissement en CSS en longueur et en hauteur, vous devez utiliser la matrice suivante :
transform : matrix(echelleX, 0, 0, echelleY, 0, 0);
La matrix CSS proposée ci-dessous n'est qu'une retranscription sous forme de matrice de la fonction CSS scale( echelleX, echelleY ).
Pour faire une réduction en CSS ou un agrandissement en CSS en longueur, vous devez utiliser la matrice suivante :
transform : matrix(echelleX, 0, 0, 1, 0, 0);
La matrix CSS proposée ci-dessous n'est qu'une retranscription sous forme de matrice de la fonction CSS scaleX( echelleX ).
Pour faire une réduction en CSS ou un agrandissement en CSS en hauteur, vous devez utiliser la matrice suivante :
transform : matrix(1, 0, 0, echelleY, 0, 0);
La matrix CSS proposée ci-dessous n'est qu'une retranscription sous forme de matrice de la fonction CSS scaleY( echelleY ).
echelleX valeur du coefficient d'agrandissement ou de réduction horizontal. echelleY valeur du coefficient d'agrandissement ou de réduction vertical.
.carre5{
transform : scale(0.8, 1.1)
}
.carre3{
transform : matrix(0.8, 0, 0, 1.1, 0, 0)
}
.carre4{
transform : scale(0.8)
}
.carre5{
transform : matrix(0.8, 0, 0, 1, 0, 0)
}
.carre6{
transform : scaleY(1.1)
}
.carre7{
transform : matrix(1, 0, 0, 1.1, 0, 0)
}
Faire une translation à un élément HTML en CSS.
Alias la fonction CSS translate(), translateX() et translateY().
Pour faire une translation en CSS verticale et horizontale, vous devez utiliser la matrice suivante :
transform : matrix(1, 0, 0, 1, deplacementX, deplacementY); La matrix CSS proposée ci-dessous n'est qu'une retranscription de la fonction CSS translate( deplacementX, deplacementY ).
Pour faire une translation en CSS horizontale, vous devez utiliser la matrice suivante :
transform : matrix(1, 0, 0, 1, deplacementX, 0);
La matrix CSS proposée ci-dessous n'est qu'une retranscription sous forme de matrice de la fonction CSS translateX( deplacementX ).
Pour faire une translation en CSS verticale, vous devez utiliser la matrice suivante :
transform : matrix(1, 0, 0, 1, 0, deplacementY);
La matrix CSS proposée ci-dessous n'est qu'une retranscription sous forme de matrice de la fonction CSS translateY( deplacementY ).
deplacementX représente le déplacement horizontal et deplacementY représente le déplacement vertical.
.carre2{
transform : translate(3px, 4px)
}
.carre3{
transform : matrix(1, 0, 0, 1, 3, 4)
}
.carre4{
transform : translateX(3px)
}
.carre5{
transform : matrix(1, 0, 0, 1, 3, 0)
}
.carre6{
transform : translateY(4px)
}
.carre7{
transform : matrix(1, 0, 0, 1, 0, 4)
}