CSS3 Transforme
transformées CSS3 vous permettent de traduire, faire pivoter, l'échelle et l'inclinaison des éléments.
Une transformation est un effet qui permet à un changement de forme de l'élément, la taille et la position.
CSS3 soutient 2D et 3D transformations.
Passez la souris sur les éléments ci-dessous pour voir la différence entre une 2D et une transformation 3D:
Browser Support pour 2D Transforms
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -ms-, -webkit-, -moz- ou -o- specify la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
CSS3 2D Transforms
Dans ce chapitre, vous allez en apprendre davantage sur les méthodes de transformation 2D suivants:
-
translate() -
rotate() -
scale() -
skewX() -
skewY() -
matrix()
 | Astuce: Vous apprendrez à connaître les transformations 3D dans le chapitre suivant. |
|---|
Le translate() Méthode
Le translate() méthode déplace un élément à partir de sa position actuelle ( en fonction des paramètres indiqués pour l'axe X et l'axe Y).
L'exemple suivant déplace le <div> élément 50 pixels à droite et 100 pixels vers le bas de sa position actuelle:
Exemple
div
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Essayez - le vous - même » La rotate() Méthode
La rotate() méthode fait tourner un sens horaire de l' élément ou antihoraire selon un degré donné.
L'exemple suivant fait tourner le <div> élément dans le sens horaire avec 20 degrés:
Exemple
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
Essayez - le vous - même » L'utilisation de valeurs négatives va tourner l'élément dans le sens antihoraire.
L'exemple suivant fait tourner le <div> élément anti-horaire avec 20 degrés:
Exemple
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
Essayez - le vous - même » L' scale() Méthode
L' scale() méthode augmente ou diminue la taille d'un élément ( en accord avec les paramètres fournis pour la largeur et la hauteur).
L'exemple suivant augmente la <div> élément à être deux fois de sa largeur d' origine, et trois fois de sa hauteur d' origine:
Exemple
div
{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
Essayez - le vous - même » L'exemple suivant diminue le <div> élément à la moitié de sa largeur et sa hauteur d' origine:
Exemple
div
{
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
Essayez - le vous - même » Le skewX() Méthode
La skewX() méthode biaise un élément le long de l'axe X par l'angle donné.
L'exemple suivant fausse l' <div> élément 20 degrés le long de l'axe X:
Exemple
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
Essayez - le vous - même » Le skewY() Méthode
Le skewY() méthode biaise un élément le long de l'axe Y par l'angle donné.
L'exemple suivant fausse l' <div> élément 20 degrés le long de l'axe Y:
Exemple
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
Essayez - le vous - même » Le skew() Méthode
L' skew() méthode biaise le long d' un élément X et l' axe Y par les angles donnés.
L'exemple suivant fausse l' <div> élément 20 degrés le long de l'axe X, et 10 degrés le long de l'axe Y:
Exemple
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
Essayez - le vous - même » Si le deuxième paramètre est absent, il a une valeur nulle. Ainsi, l'exemple suivant biaise le <div> élément 20 degrés le long de l'axe X:
Exemple
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
Essayez - le vous - même » La matrix() Méthode
La matrix() méthode combine toute la 2D transformer les méthodes en une seule.
La matrix() méthode prend six paramètres, contenant des fonctions mathématiques, qui vous permet de faire pivoter, de l' échelle, déplacer (traduire), et l' inclinaison des éléments.
Les paramètres sont les suivants: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) :
Exemple
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
CSS3 Transform Properties
Le tableau ci-dessous tous les 2D propriétés de transformation:
| Propriété | La description |
|---|---|
| transform | Applique une transformation 2D ou 3D à un élément |
| transform-origin | Permet de modifier la position des éléments transformés |
2D Transform Méthodes
| Fonction | La description |
|---|---|
| matrix(n,n,n,n,n,n) | Définit une transformation 2D, en utilisant une matrice de six valeurs |
| translate(x,y) | Définit une translation 2D, déplaçant l'élément le long de l'axe X et l'axe Y, |
| translateX(n) | Définit une translation 2D, déplaçant l'élément le long de l'axe X. |
| translateY(n) | Définit une translation 2D, déplaçant l'élément le long de l'axe Y. |
| scale(x,y) | Définit une transformation d'échelle en 2D, en changeant les éléments largeur et la hauteur |
| scaleX(n) | Définit une transformation d'échelle en 2D, en changeant la largeur de l'élément |
| scaleY(n) | Définit une transformation d'échelle en 2D, en changeant la taille de l'élément |
| rotate(angle) | Définit une rotation 2D, l'angle est spécifié dans le paramètre |
| skew(x-angle,y-angle) | Définit une transformation skew 2D le long de la X- et l'axe des Y |
| skewX(angle) | Définit une transformation par inclinaison 2D le long de l'axe X |
| skewY(angle) | Définit une transformation par inclinaison 2D le long de l'axe Y |