Attribut TRANSFORM

Rôle

L’attribut transform permet d’utiliser des fonctions de transformation pour manipuler l’élément html dans l’espace 2D ou 3D

Les fonctions de transformation sont :

•  Translation : permet de déplacer sur les axes X, Y et Z un élément HTML par rapport à sa position d’origineCette fonction est gérer par translate().
  Syntaxe :
  transform : translate(20px,10px)Dans l’exemple ci dessous le cadre rouge représente la position d’origine du bloc orange qui est déplacé en X (20px) et en Y (30px).
•  Rotation : permet d’effectuer une de rotation à un élémentCette fonction est gérer par rotate().
  Syntaxe :
  transform : rotate(10deg)Dans l’exemple ci dessous le cadre rouge représente la position d’origine du bloc orange qui pivote d’un angle de 10 degrés. Par défaut la rotation s’effectue à partir du milieu de l’élément
•  Inclinaison : permet de rendre oblique la forme d’un élémentCette fonction est gérer par skew().
  Syntaxe :
  transform : skew(20deg,10deg)Dans l’exemple ci dessous le cadre rouge représente la position d’origine. Le bloc vert s’incline en X (15deg). Le bloc orange s’incline en Y (10deg). Par défaut l’inclinaison s’effectue à partir du milieu de l’élément
•  Mise à l’échelle : permet de redimensionner un élémentCette fonction est gérer par scale().
  Syntaxe :
  transform : scale(2)Dans l’exemple ci dessous le cadre rouge représente la taille d’origine. La taille du bloc orange a été réduite (0.8 fois la taille d’origine). Par défaut la mise à l’échelle s’effectue à partir du milieu de l’élément
•  Matrice de transformation : permet de regrouper plusieurs fonctions de transformation dans une matriceCette fonction est gérer par matrix().
  Syntaxe :
  transform : matrix(0.9, -0.05, -0.375, 1.375, 220, 20)Dans l’exemple ci dessous le cadre rouge représente la position d’origine. Le bloc orange a subi plusieurs transformation à partir de la matrice ().

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.transform

Compatibilité

L’attribut transform est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -ms-(Internet Explorer…), -webkit- (Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)

Valeurs

Les différentes valeurs de l’attribut transform sont:

none

Aucune transformation
Syntaxe :
transform : none

matrix

Utilisation d’une matrice à 6 valeurs
Syntaxe :
transform : matrix(n,n,n,n,n,n)

matrix3d

Utilisation d’une matrice à 16 valeurs. A lire cet article (en anglais) sur matrix3D
Syntaxe :
transform : matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

translate

Translation en X et en Y
Syntaxe :
transform : translate(12px,20px)

translate3d

Translation en X, en Y et en Z. La dimension Z est la profondeur, c’est à dire la distance apparente qui sépare l’observateur et l’élément
Syntaxe :
transform : translate3d(12px,20px,30px)

translateX

Translation en X
Syntaxe :
transform : translateX(12px)

translateY

Translation en Y
Syntaxe :
transform : translateY(22px)

translateZ

Translation en Z. La dimension Z est la profondeur, c’est à dire la distance apparente qui sépare l’observateur et l’élément
Syntaxe :
transform : translateZ(22px)

scale

Augmente ou diminue les dimensions d’un élément. Vous pouvez utiliser un nombre ou deux (pour les axes X et Y). Chaque nombre représente un coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scale(0.82,2)

scale3d

Augmente ou diminue les dimensions d’un élément. Vous pouvez utiliser un nombre ou trois (pour les axes X Y et Z). Chaque nombre représence le coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scale3d(0.82,2,3)

scaleX

Augmente ou diminue les dimensions d’un élément sur l’axe X. Il faut utiliser un nombre qui représente le coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scaleX(0.82)

scaleY

Augmente ou diminue les dimensions d’un élément sur l’axe Y. Il faut utiliser un nombre qui représente le coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scaleY(2)

scaleZ

Augmente ou diminue les dimensions d’un élément sur l’axe Z. Il faut utiliser un nombre qui représente le coefficient à appliquer par rapport à la taille d’origine. Si ce nombre est plus petit que 1 (ex : 0.8) la longeur sera réduite
Syntaxe :
transform : scaleZ(2)

rotate

Permet de faire pivoter un élément. Il faut fournir l’angle de rotation en argument
Syntaxe :
transform : rotate(20deg)

rotate3d

Permet de gérer les rotations de l’élément dans l’espace 3D.
Syntaxe :
transform : rotate3d(1,1,1,60deg)

rotateX

Permet de gérer la rotation de l’élément sur l’axe X dans l’espace 3D.
Syntaxe :
transform : rotateX(60deg)

rotateY

Permet de gérer la rotation de l’élément sur l’axe Y dans l’espace 3D.
Syntaxe :
transform : rotateY(60deg)

rotateZ

Permet de gérer la rotation de l’élément sur l’axe Z dans l’espace 3D.
Syntaxe :
transform : rotateZ(60deg)

skew

Permet de gérer l’inclinaison sur les axes X et Y. Vous pouvez utiliser une valeur d’angle ou deux (pour les axes X et Y)
Syntaxe :
transform : skex(0, 20deg)

skewX

Permet de gérer l’inclinaison sur l’axe X. Vous devez utiliser une valeur d’angle
Syntaxe :
transform : skewX(20deg)

skewY

Permet de gérer l’inclinaison sur l’axe Y. Vous devez utiliser une valeur d’angle
Syntaxe :
transform : skewX(20deg)

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
transform : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
transform : inherit

A voir aussi

transition– transition-duration– transition-property– transition-timing-function