Attribut transform CSS

Définition et utilisation

L'attribut transform applique une transformation 2D ou 3D à l'élément. Cet attribut permet de faire pivoter, agrandir, déplacer ou incliner l'élément.

Pour mieux comprendre l'attribut transform, veuillez consulter cetteDémonstration.

Veuillez également consulter :

Tutoriel CSS3 :Transformation 2D CSS3

Tutoriel CSS3 :Transformation 3D CSS3

Manuel HTML DOM :Attribut transform

Exemple

Rotation de l'élément div :

div
{
transform:rotate(7deg);
}

Essayez-le vous-même

Plus d'exemples en bas de la page.

Syntaxe CSS

transform: none|transform-functions;

Valeur de l'attribut

Valeur Description Test
aucune Définition de la non-transformation. Test
matrix(n,n,n,n,n,n) Définition de la transformation 2D, utilisant une matrice de six valeurs. Test
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Définition de la transformation 3D, utilisant une matrice 4x4 de 16 valeurs.
translate(x,y) Définir une transformation 2D. Test
translate3d(x,y,z) Définir une transformation 3D.
translateX(x) Définir une transformation, en utilisant simplement la valeur de l'axe X. Test
translateY(y) Définir une transformation, en utilisant simplement la valeur de l'axe Y. Test
translateZ(z) Définir une transformation 3D, en utilisant simplement la valeur de l'axe Z.
scale(x,y) Définir une transformation de mise à l'échelle 2D. Test
scale3d(x,y,z) Définir une transformation de mise à l'échelle 3D.
scaleX(x) Définir une transformation de mise à l'échelle en définissant la valeur de l'axe X. Test
scaleY(y) Définir une transformation de mise à l'échelle en définissant la valeur de l'axe Y. Test
scaleZ(z) Définir une transformation de mise à l'échelle 3D en définissant la valeur de l'axe Z.
rotate(angle) Définir une rotation 2D, en spécifiant l'angle dans les paramètres. Test
rotate3d(x,y,z,angle) Définir une rotation 3D.
rotateX(angle) Définir une rotation 3D suivant l'axe X. Test
rotateY(angle) Définir une rotation 3D suivant l'axe Y. Test
rotateZ(angle) Définir une rotation 3D suivant l'axe Z. Test
skew(x-angle,y-angle) Définir une transformation d'inclinaison 2D suivant les axes X et Y. Test
skewX(angle) Définir une transformation d'inclinaison 2D suivant l'axe X. Test
skewY(angle) Définir une transformation d'inclinaison 2D suivant l'axe Y. Test
perspective(n) Définir une vue de perspective pour les éléments de transformation 3D. Test

Détails techniques

Valeur par défaut : aucune
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.transform="tourner(7deg)"

Plus d'exemples

L'image jetée sur la table
Cet exemple montre comment créer une image Polaroid et la faire pivoter.

Support du navigateur

Les numéros dans le tableau indiquent la première version de navigateur prenant en charge cette propriété.

Les nombres précédés de -webkit-、-moz- ou -ms- représentent la première version utilisant les préfixes.

propriété Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-