CSS3 transformation 2D

Transformations CSS3

Les transformations CSS3 peuvent déplacer, mettre à l'échelle, faire pivoter, allonger ou étirer des éléments.

Comment cela fonctionne-t-il ?

L'effet d'une transformation est de modifier la forme, la taille et la position d'un élément.

Vous pouvez utiliser des transformations 2D ou 3D pour transformer vos éléments.

Survolez les éléments suivants pour voir les effets de transformation 2D et 3D :

Prise en charge des navigateurs

Les nombres du tableau indiquent la première version du navigateur qui prend en charge la propriété.

Les nombres suivis de -webkit-, -ms- ou -moz- indiquent la première version du navigateur qui prenait en charge la propriété préfixée.

Internet Explorer 10, Firefox et Opera prennent en charge la propriété transform.

Chrome et Safari nécessitent la version préfixée par -webkit-.

Remarque :Internet Explorer 9 nécessite la version préfixée -ms-.

transformation 2D

Dans ce chapitre, vous découvrirez les méthodes de transformation 2D :

• translate()
• rotate()
• scale()
• skew()
• matrix()

Dans le chapitre suivant, vous découvrirez les transformations 3D.

Exemple

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari et Chrome */ }

Essayez-le vous-même »

Méthode translate()

La méthode translate() déplace un élément de sa position actuelle, selon les paramètres donnés pour les positions gauche (axe X) et haut (axe Y).

Exemple

div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari et Chrome */ }

Essayez-le vous-même »

La valeur translate (50px, 100px) déplace l'élément de 50 pixels vers la gauche et de 100 pixels vers le haut.

méthode rotate()

La méthode rotate() fait pivoter un élément dans le sens horaire d'un nombre de degrés donné. Les valeurs négatives sont autorisées, ce qui fait pivoter l'élément dans le sens antihoraire.

Exemple

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari et Chrome */ }

Essayez-le vous-même »

La valeur rotate (30deg) fait pivoter l'élément de 30 degrés dans le sens horaire.

méthode scale()

La méthode scale() augmente ou diminue la taille d'un élément, selon les paramètres de largeur (axe X) et de hauteur (axe Y) :

Exemple

-ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /*Syntaxe standard*/

Essayez-le vous-même »

scale(2,3) transforme la largeur en 2 fois sa taille d'origine et la hauteur en 3 fois sa taille d'origine.

méthode skew()

Syntaxe

transform:skew(<angle> [,<angle>]);

Contient deux valeurs de paramètre, représentant les angles d'inclinaison le long de l'axe X et de l'axe Y. Si le deuxième paramètre est vide, sa valeur par défaut est 0. Les paramètres négatifs indiquent une inclinaison dans la direction opposée.

• skewX(<angle>); représente une inclinaison uniquement le long de l'axe X (direction horizontale).
• skewY(<angle>); représente une inclinaison uniquement le long de l'axe Y (direction verticale).

Exemple

div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari et Chrome */ }

Essayez-le vous-même »

skew(30deg,20deg)élément selon l'Xaxe etYIncline de 20 degrés et 30 degrés le long des axes.

méthode matrix()

La méthode matrix() combine toutes les méthodes de transformation 2D en une seule.

La méthode matrix possède six paramètres, incluant les fonctions de rotation, de mise à l'échelle, de déplacement (translation) et d'inclinaison.

Exemple

Utilisez la méthode matrix() pour faire pivoter l'élément div de 30°.

div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari et Chrome */ }

Essayez-le vous-même »

Nouvelles propriétés de transformation

La liste suivante répertorie toutes les propriétés de transformation :

Méthodes de conversion 2D