CSS Transformations 2D
Transformations 2D CSS
La propriété CSS transform applique une transformation 2D ou 3D à un élément. Cette propriété vous permet de faire pivoter, redimensionner, déplacer et incliner des éléments.
Survolez l'élément ci-dessous pour voir une transformation 2D :
Fonctions de Transformations 2D CSS
Avec la propriété CSS transform , vous pouvez utiliser les fonctions de transformation 2D suivantes :
La Fonction CSS translate()
La fonction translate() déplace un élément de sa position actuelle (selon les paramètres donnés pour l'axe X et l'axe Y).
L'exemple suivant déplace l'élément <div> de 50 pixels vers la droite et de 100 pixels vers le bas par rapport à sa position actuelle :
Exemple
div {
transform: translate(50px, 100px);
} La Fonction CSS rotate()
La fonction rotate() fait pivoter un élément dans le sens des aiguilles d'une montre ou dans le sens inverse selon un degré donné.
L'exemple suivant fait pivoter l'élément <div> dans le sens des aiguilles d'une montre de 20 degrés :
Exemple
div {
transform: rotate(20deg);
} L'utilisation de valeurs négatives fera pivoter l'élément dans le sens inverse des aiguilles d'une montre.
L'exemple suivant fait pivoter l'élément <div> dans le sens inverse des aiguilles d'une montre de 20 degrés :
Exemple
div {
transform: rotate(-20deg);
} La Fonction CSS scale()
La fonction scale() augmente ou diminue la taille d'un élément (selon les paramètres donnés pour la largeur et la hauteur).
L'exemple suivant augmente l'élément <div> pour qu'il soit deux fois sa largeur d'origine et trois fois sa hauteur d'origine :
Exemple
div {
transform: scale(2, 3);
} L'exemple suivant diminue l'élément <div> pour qu'il soit la moitié de sa largeur et de sa hauteur d'origine :
Exemple
div {
transform: scale(0.5, 0.5);
} La Fonction CSS scaleX()
La fonction scaleX() augmente ou diminue la largeur d'un élément.
L'exemple suivant augmente l'élément <div> pour qu'il soit deux fois sa largeur d'origine :
Exemple
div {
transform: scaleX(2);
} L'exemple suivant diminue l'élément <div> pour qu'il soit la moitié de sa largeur d'origine :
Exemple
div {
transform: scaleX(0.5);
} La Fonction CSS scaleY()
La fonction scaleY() augmente ou diminue la hauteur d'un élément.
L'exemple suivant augmente l'élément <div> pour qu'il soit trois fois sa hauteur d'origine :
Exemple
div {
transform: scaleY(3);
} L'exemple suivant diminue l'élément <div> pour qu'il soit la moitié de sa hauteur d'origine :
Exemple
div {
transform: scaleY(0.5);
} La Fonction CSS skewX()
La fonction skewX() incline un élément le long de l'axe X selon l'angle donné.
L'exemple suivant incline l'élément <div> de 20 degrés le long de l'axe X :
Exemple
div {
transform: skewX(20deg);
} La Fonction CSS skewY()
La fonction skewY() incline un élément le long de l'axe Y selon l'angle donné.
L'exemple suivant incline l'élément <div> de 20 degrés le long de l'axe Y :
Exemple
div {
transform: skewY(20deg);
} La Fonction CSS skew()
La fonction skew() incline un élément le long des axes X et Y selon les angles donnés.
L'exemple suivant incline l'élément <div> de 20 degrés le long de l'axe X et de 10 degrés le long de l'axe Y :
Exemple
div {
transform: skew(20deg, 10deg);
} Si le deuxième paramètre n'est pas spécifié, il a une valeur nulle. Ainsi, l'exemple suivant incline l'élément <div> de 20 degrés le long de l'axe X :
Exemple
div {
transform: skew(20deg);
} La Fonction CSS matrix()
La fonction matrix() combine toutes les fonctions de transformation 2D en une seule.
La fonction matrix() prend six paramètres, contenant des fonctions mathématiques, qui vous permettent de faire pivoter, redimensionner, déplacer (traduire) et incliner des éléments.
Les paramètres sont les suivants : matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Exemple
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
} Propriétés de Transformation CSS
Le tableau suivant répertorie toutes les propriétés de transformation 2D :
| Propriété | Description |
|---|---|
| transform | Applique une transformation 2D ou 3D à un élément |
| transform-origin | Permet de changer la position des éléments transformés |
Fonctions de Transformation 2D CSS
| Fonction | Description |
|---|---|
| matrix() | Définit une transformation 2D, en utilisant une matrice de six valeurs |
| translate() | Définit une translation 2D, déplaçant l'élément le long des axes X et Y |
| translateX() | Définit une translation 2D, déplaçant l'élément le long de l'axe X |
| translateY() | Définit une translation 2D, déplaçant l'élément le long de l'axe Y |
| scale() | Définit une transformation de mise à l'échelle 2D, redimensionnant la largeur et la hauteur des éléments |
| scaleX() | Définit une transformation de mise à l'échelle 2D, redimensionnant la largeur de l'élément |
| scaleY() | Définit une transformation de mise à l'échelle 2D, redimensionnant la hauteur de l'élément |
| rotate() | Définit une rotation 2D, l'angle étant spécifié dans le paramètre |
| skew() | Définit une transformation de déformation 2D le long des axes X et Y |
| skewX() | Définit une transformation de déformation 2D le long de l'axe X |
| skewY() | Définit une transformation de déformation 2D le long de l'axe Y |