Transformations CSS 2D
Transformations CSS 2D
Les transformations CSS vous permettent de déplacer, faire pivoter, mettre à l’échelle et incliner des éléments.
Passez la souris sur l’élément ci-dessous pour voir une transformation 2D :
Dans ce chapitre, vous découvrirez la propriété CSS suivante :
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| transformer | 36,0 | 10.0 | 16.0 | 9.0 | 23,0 |
Méthodes de transformation CSS 2D
Avec le CSS transform propriété, vous pouvez utiliser les méthodes de transformation 2D suivantes :
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Conseil: Vous en apprendrez plus sur les transformations 3D dans le chapitre suivant.
La méthode translate()
Le 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
La méthode rotate()
Le rotate() La méthode fait tourner un élément dans le sens des aiguilles d’une montre ou dans le sens inverse des aiguilles d’une montre selon un degré donné.
L’exemple suivant fait pivoter l’élément
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
La méthode scale()
Le scale() La méthode 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
L’exemple suivant réduit l’élément
La méthode scaleX()
Le scaleX() méthode augmente ou diminue la largeur d’un élément.
L’exemple suivant augmente l’élément
L’exemple suivant réduit l’élément
La méthode scaleY()
Le scaleY() méthode augmente ou diminue la hauteur d’un élément.
L’exemple suivant augmente l’élément
L’exemple suivant réduit l’élément
La méthode skewX()
Le skewX() La méthode incline un élément le long de l’axe X de l’angle donné.
L’exemple suivant incline l’élément
La méthode skewY()
Le skewY() La méthode incline un élément le long de l’axe Y de l’angle donné.
L’exemple suivant incline l’élément
La méthode skew()
Le skew() La méthode incline un élément le long des axes X et Y selon les angles donnés.
L’exemple suivant incline l’élément
Si le deuxième paramètre n’est pas spécifié, il a une valeur nulle. Ainsi, l’exemple suivant incline l’élément
La méthode matrix()
Le matrix() combine toutes les méthodes de transformation 2D en une seule.
La méthode matrix() prend six paramètres, contenant des fonctions mathématiques, qui vous permettent de faire pivoter, mettre à l’échelle, déplacer (traduire) et incliner des éléments.
Les paramètres sont les suivants : matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Propriétés de transformation CSS
Le tableau suivant répertorie toutes les propriétés de transformation 2D :
| Propriété | Description |
|---|---|
| transformer | Applique une transformation 2D ou 3D à un élément |
| transformer-origine | Permet de changer la position sur les éléments transformés |
Méthodes de transformation CSS 2D
| Fonction | Description |
|---|---|
| matrice(n,n,n,n,n,n) | Définit une transformation 2D, en utilisant une matrice de six valeurs |
| traduire(x, y) | Définit une translation 2D, déplaçant l’élément le long des axes X et Y |
| traduireX(n) | Définit une translation 2D, déplaçant l’élément le long de l’axe X |
| traduireY(n) | Définit une translation 2D, déplaçant l’élément le long de l’axe Y |
| escalader(x,y) | Définit une transformation d’échelle 2D, modifiant la largeur et la hauteur des éléments |
| échelleX(n) | Définit une transformation d’échelle 2D, modifiant la largeur de l’élément |
| échelleY(n) | Définit une transformation d’échelle 2D, modifiant la hauteur de l’élément |
| tourner(angle) | Définit une rotation 2D, l’angle est spécifié dans le paramètre |
| fausser(angle x, angle y) | Définit une transformation oblique 2D le long des axes X et Y |
| biaisX(angle) | Définit une transformation oblique 2D le long de l’axe X |
| obliqueY(angle) | Définit une transformation oblique 2D le long de l’axe Y |
#Transformations #CSS