Transformations 2D CSS
- Page précédente Polices de réseau CSS
- Page suivante Transformations 3D CSS
Transformations 2D CSS
Les transformations CSS (transforms) vous permettent de déplacer, de faire pivoter, de redimensionner et d'incliner les éléments.
Placez le curseur sur l'élément suivant pour voir les transformations 2D :
Dans ce chapitre, vous apprendrez les propriétés CSS suivantes :
transform
Prise en charge du navigateur
Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.
| Attribut | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
Méthode de transformation 2D CSS
En utilisant CSS transform Les attributs, vous pouvez utiliser les méthodes de transformation 2D suivantes :
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Astuce :Vous apprendrez les transformations 3D au chapitre suivant.
Méthode translate()
translate() La méthode déplace l'élément à partir de sa position actuelle (selon les paramètres spécifié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 à partir de sa position actuelle :
Exemple
div {
transform: translate(50px, 100px);
}
Méthode rotate()
rotate() La méthode fait pivoter l'élément dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre selon l'angle 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);
}
Utilisez des valeurs négatives pour faire 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);
}
Méthode scale()
scale() La méthode augmente ou diminue la taille de l'élément (selon les paramètres de largeur et de hauteur fournis).
L'exemple suivant agrandit l'élément <div> à deux fois sa largeur et à trois fois sa hauteur d'origine :
Exemple
div {
transform: scale(2, 3);
}
L'exemple suivant réduit l'élément <div> à la moitié de sa largeur et de sa hauteur d'origine :
Exemple
div {
transform: scale(0.5, 0.5);
}
Méthode scaleX()
scaleX() La méthode augmente ou diminue la largeur de l'élément.
L'exemple suivant agrandit l'élément <div> à deux fois sa largeur d'origine :
Exemple
div {
transform: scaleX(2);
}
L'exemple suivant réduit l'élément <div> à la moitié de sa largeur d'origine :
Exemple
div {
transform: scaleX(0.5);
}
Méthode scaleY()
scaleY() La méthode augmente ou diminue la hauteur de l'élément.
L'exemple suivant agrandit l'élément <div> à trois fois sa hauteur d'origine :
Exemple
div {
transform: scaleY(3);
}
L'exemple suivant réduit l'élément <div> à la moitié de sa hauteur d'origine :
Exemple
div {
transform: scaleY(0.5);
}
Méthode skewX()
skewX() La méthode penche l'élément le long de l'axe X d'un angle donné.
L'exemple suivant penche l'élément <div> de 20 degrés le long de l'axe X :
Exemple
div {
transform: skewX(20deg);
}
Méthode skewY()
skewY() La méthode penche l'élément le long de l'axe Y d'un angle donné.
L'exemple suivant penche l'élément <div> de 20 degrés le long de l'axe Y :
Exemple
div {
transform: skewY(20deg);
}
Méthode skew()
skew() La méthode penche l'élément le long des axes X et Y d'un angle donné.
L'exemple suivant fait pencher 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é, la valeur est zéro. Par conséquent, l'exemple suivant fait pencher l'élément <div> de 20 degrés le long de l'axe X :
Exemple
div {
transform: skew(20deg);
}
Méthode matrix()
matrix() La méthode combine toutes les méthodes de transformation 2D en une seule.
matrix() La méthode peut accepter six paramètres, y compris des fonctions mathématiques, qui vous permettent de faire pivoter, d'agrandir, de déplacer (translater) et d'incliner l'élément.
Les paramètres sont les suivants : matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Exemple
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Attributs de transformation CSS
Le tableau suivant liste tous les attributs de transformation 2D :
| Attribut | Description |
|---|---|
| transform | Appliquer une transformation 2D ou 3D à l'élément. |
| transform-origin | Permet de changer la position de l'élément transformé. |
Méthode de transformation 2D CSS
| Fonction | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Définir la transformation 2D en utilisant une matrice de six valeurs. |
| translate(x,y) | Définir la transformation 2D, déplacer l'élément le long des axes X et Y. |
| translateX(n) | Définir la transformation 2D, déplacer l'élément le long de l'axe X. |
| translateY(n) | Définir la transformation 2D, déplacer l'élément le long de l'axe Y. |
| scale(x,y) | Définir une transformation de mise à l'échelle 2D, en changeant la largeur et la hauteur de l'élément. |
| scaleX(n) | Définir une transformation de mise à l'échelle 2D, en changeant la largeur de l'élément. |
| scaleY(n) | Définir une transformation de mise à l'échelle 2D, en changeant la hauteur de l'élément. |
| rotate(angle) | Définir une rotation 2D, en spécifiant l'angle dans les paramètres. |
| skew(x-angle,y-angle) | Définir une transformation de décalage 2D suivant les axes X et Y. |
| skewX(angle) | Définir une transformation de décalage 2D suivant l'axe X. |
| skewY(angle) | Définir une transformation de décalage 2D suivant l'axe Y. |
- Page précédente Polices de réseau CSS
- Page suivante Transformations 3D CSS
