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 :
transform
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é.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
Méthodes de transformation CSS 2D
Avec la propriété CSS transform, vous pouvez utiliser les méthodes de transformation 2D suivantes :
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Astuce : Vous en apprendrez plus sur les transformations 3D dans le chapitre suivant.
La méthode translate()
La translate()méthode 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 méthode rotate()
La rotate()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 <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 méthode scale()
La scale()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 <div> à deux fois sa largeur d'origine 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);
}
La méthode scaleX()
La scaleX()méthode augmente ou diminue la largeur d'un élément.
L'exemple suivant augmente 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);
}
La méthode scaleY()
La scaleY()méthode augmente ou diminue la hauteur d'un élément.
L'exemple suivant augmente 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);
}
La méthode skewX()
La skewX()méthode incline un élément le long de l'axe X de 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 méthode skewY()
La skewY()méthode incline un élément le long de l'axe Y de 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 méthode skew()
La skew()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 <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 méthode matrix()
La matrix()méthode 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())
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 :
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
Méthodes de transformation CSS 2D
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |