Attribut transform de style

Définition et utilisation

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

Veuillez également consulter :

Manuel de référence CSS :L'attribut transform

Exemple

Tourner l'élément div :

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Essayer par vous-même

Syntaxe

Retourner l'attribut transform :

object.style.transform

Définir l'attribut transform :

object.style.transform = "none|transform-functions|initial|inherit"

Valeur de l'attribut

Valeur Description
none Définit qu'il ne devrait pas y avoir de transformation.
matrix(n, n, n, n, n, n) Définit une transformation bidimensionnelle en utilisant une matrice de six valeurs.
matrix3d(n, n, n, n, etc....) Définit une transformation 3D en utilisant un matrice 4x4 de 16 valeurs.
translate(x, y) Définit une translation 2D.
translate3d(x, y, z) Définit une translation 3D.
translateX(x) Définit une translation, en utilisant uniquement la valeur de l'axe X.
translateY(y) Définit une translation, en utilisant uniquement la valeur de l'axe Y.
translateZ(z) Définit une translation 3D, en utilisant uniquement la valeur de l'axe Z.
scale(x, y) Définit une transformation de proportion 2D.
scale3d(x, y, z) Définit une transformation de proportion 3D.
scaleX(x) Définit une transformation de proportion en assignant une valeur à l'axe X.
scaleY(y) Définit une transformation de proportion en assignant une valeur à l'axe Y.
scaleZ(z) Définit une transformation de proportion 3D en assignant une valeur à l'axe Z.
rotate(angle) Définit une rotation 2D, en spécifiant l'angle dans les paramètres.
rotate3d(x, y, z, angle) Définit une rotation 3D.
rotateX(angle) Définit une rotation 3D le long de l'axe X.
rotateY(angle) Définit une rotation 3D le long de l'axe Y.
rotateZ(angle) Définit une rotation 3D le long de l'axe Z.
skew(x-angle, y-angle) Définit une transformation de décalage 2D le long des axes X et Y.
skewX(angle) Définit une transformation de décalage 2D le long de l'axe X.
skewY(angle) Définit une transformation de décalage 2D le long de l'axe Y.
perspective(n) Définit la perspective de l'élément de transformation 3D.
initial Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits cette propriété de son élément parent. Voir inherit.

Détails techniques

Valeur par défaut : Aucun
Valeur de retour : Une chaîne de caractères, représentant l'élément L'attribut transform.
Version de CSS : CSS3

Support du navigateur

Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0