transform CSS propriété

Définition de la CSS transform.

La propriété de Transformation CSS transform permet de spécifier le type de transformation 2d ou 3d à appliquer sur un élément HTML.

Exemple de syntaxe CSS transform :

transform : rotate(20deg);
transform : translate(20px, 10px);
transform : scale(1, 2);
transform : skew(45deg, 62deg);
transform : translate(100px) rotate(20deg) skew(45deg, 62deg) scale(1, 2);

La propriété de Transformation CSS transform peut prendre pour les transformations 2D ou 3D une/des valeurs suivantes :

none : aucune transformation, valeur par défaut.
matrix() : fonction de Transformation CSS pour appliquer une matrice de transformation à un élément.
translate() : fonction de Transformation CSS pour déplacer horizontalement et verticalement un élément.
translateX() : fonction de Transformation CSS pour déplacer horizontalement un élément.
translateY() : fonction de Transformation CSS pour déplacer verticalement un élément.
translateZ() : fonction de Transformation CSS pour déplacer en profondeur un élément.
translate3d() : fonction de Transformation CSS pour déplacer sur les trois axes de perspective un élément.
scale() : fonction de Transformation CSS pour redimensionner horizontalement et verticalement un élément.
scaleX() : fonction de Transformation CSS pour redimensionner horizontalement un élément.
scaleY() : fonction de Transformation CSS pour redimensionner verticalement un élément.
scaleZ() : fonction de Transformation CSS pour redimensionner un élément sur sa profondeur.
scale3d() : fonction de Transformation CSS pour redimensionner un élément sur les trois axes de perspective.
rotate() : fonction de Transformation CSS pour faire une rotation à un élément.
rotateX() : fonction de Transformation CSS pour faire une rotation à un élément sur l'axe de perspective X.
rotateY() : fonction de Transformation CSS pour faire une rotation à un élément sur l'axe de perspective Y.
rotateZ() : fonction de Transformation CSS pour faire une rotation à un élément sur l'axe de perspective Z.
rotate3d() : fonction de Transformation CSS pour faire une rotation à un élément sur les trois axes de perspective.
skew() : fonction de Transformation CSS pour incliner horizontalement et verticalement un élément.
skewX() : fonction de Transformation pour incliner horizontalement un élément.
skewY() : fonction de Transformation pour incliner verticalement un élément.

Tester en direct les diverses fonctions de Transformation CSS de la propriété transform CSS.

Exemple de code transform CSS

Conditions d'application de la CSS transform.

La propriété de Transformation CSS transform est applicable sur l'ensemble des balises HTML ou XHTML sauf les balises de type inline.
La propriété de Transformation CSS transform CSS n'a pas d'équivalent en HTML.

Problème d'interprétation de transform en Css.

La propriété de Transformation CSS transform CSS est reconnue par Internet Explorer 10+, Firefox 16+, et Opera 12.1.

Règles de syntaxes CSS pour transform.

Intéractions sur les éléments positionnés fils

Attention, l'application de la propriété CSS transform autre que none sur un élément, entraine la création d'un nouveau point d'origine pour les fils, est créé aussi un contexte d'empilement.

Règles d'écriture de transform

Pour les unités de longueur en pourcentage, le pourcentage est lié à la hauteur ou longueur de l'élément à transformer.

La propriété CSS transform accepte le cumule des fonctions de transformation citées ci-dessus :

Exemple d'écriture CSS de transform :

transform : translate(10px, 20px) rotate(30deg);

Compatibilités navigateurs de la propriété transform

Détails des versions de la CSS transform: Propriété transform est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS transform: Propriété CSS transform est compatible à partir de Chrome 36; Propriété CSS transform est compatible à partir de Firefox 16; Propriété CSS transform est compatible à partir de Internet Explorer 10; Propriété CSS transform plus ou moins compatible à partir de Opera 12.00; Propriété CSS transform est compatible à partir de Safari 9

Propriétés CSS préfixées de transform

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété transform CSS :

Pour augmenter la compatibilité avec les navigateurs, vous pouvez utiliser leur propre propriété css pour les transformations 2D:

-webkit-transform pour les navigateurs de types webkit (safari >= 3.1 et Chrome )
-moz-transform pour Firefox >= 3.5 à <16
-o-transform pour le navigateur Opera >= 10.5 à < 12.1
-ms-transform pour le navigateur internet explorer = 9

Donc pour que cela soit un minimum compatible, vous devez utiliser les diverses versions de la css transform :

Exemple d'écriture CSS multi-navigateurs de transform :

-webkit-transform : rotate(30deg);
-moz-transform : rotate(30deg);
-ms-transform : rotate(30deg);
-o-transform : rotate(30deg);
transform : rotate(30deg);

Votre avis sur la définition transform en CSS

Votez pour la définition CSS `transform`

Votes: 4.4 / 5 - 14 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css transform

Définitions CSS annexes transform

matrix(): La fonction de Matrice CSS MATRIX() de la propriété de Transformation CSS transform permet d'incliner, changer l'échelle, faire une rotation, déplacer...[ matrix() ]
rotate(): La fonction de Rotation CSS ROTATE() de la propriété de Transformation CSS transform permet de spécifier la rotation à effectuer sur un élément HTML. ...[ rotate() ]
rotate3d(): La fonction de Rotation CSS rotate3d() de la propriété de Transition CSS transform permet de spécifier la rotation à effectuer par rapport à un axe dé...[ rotate3d() ]
rotateX(): La fonction de Rotation CSS ROTATEX() de la propriété de Transformation CSS transform permet de spécifier la rotation à effectuer par rapport à l'axe ...[ rotatex() ]
rotateY(): La fonction de Rotation CSS ROTATEY() de la propriété de Transformation CSS transform permet de spécifier la rotation à effectuer par rapport à l'axe ...[ rotatey() ]
rotateZ(): La fonction de Rotation CSS ROTATEZ() de la propriété de Transformation CSS transform permet de spécifier la rotation à effectuer par rapport à l'axe ...[ rotatez() ]
scale(): La fonction d'Echelle CSS SCALE() de la propriété de Transformation CSS transform permet d'agrandir l'échelle ou de réduire d'échelle d'un élément HTM...[ scale() ]
scale3d(): La fonction d'Echelle CSS scale3d() de la propriété de Transformation CSS transform permet d'agrandir l'échelle ou de réduire l'échelle d'un élément H...[ scale3d() ]
scaleX(): La fonction d'Echelle CSS SCALEX() de la propriété de Transformation CSS transform permet d'agrandir l'échelle ou de réduire d'échelle de la longueur ...[ scalex() ]
scaleY(): La fonction d'Echelle CSS SCALEY() de la propriété de Transformation CSS transform permet d'agrandir l'échelle ou de réduire d'échelle de la hauteur d...[ scaley() ]
scaleZ(): La fonction d'Echelle CSS SCALEZ() de la propriété de Transformation CSS transform permet d'agrandir l'échelle ou de réduire d'échelle d'un élément HT...[ scalez() ]
skew(): La fonction d'Inclinaison CSS SKEW() de la propriété de Transformation CSS transform permet d'incliner horizontalement et/ou d'incliner verticalement ...[ skew() ]
skewX(): La fonction d'Inclinaison CSS SKEWX() de la propriété de Transformation CSS transform permet d'incliner horizontalement un élément HTML.Exemple d'écri...[ skewx() ]
skewY(): La fonction d'Inclinaison CSS SKEWY() de la propriété de Transformation CSS transform permet d'incliner verticalement un élément HTML.Exemple d'écritu...[ skewy() ]
translate(): La fonction de Translation CSS TRANSLATE() de la propriété de Transformation CSS transform permet de déplacer horizontalement et/ou déplacer verticale...[ translate() ]
translate3d(): La fonction de Translation CSS translate3d() de la propriété de Transformation CSS transform permet de spécifier les déplacements d'un élément HTML pa...[ translate3d() ]
translateX(): La fonction de Translation CSS TRANSLATEX() de la propriété de Transformation CSS transform permet de déplacer horizontalement un élément HTML par rap...[ translatex() ]
translateY(): La fonction de Translation CSS TRANSLATEY() de la propriété de Transformation CSS transform permet de déplacer verticalement un élément HTML par rappo...[ translatey() ]
translateZ(): La fonction de Translation CSS TRANSLATEZ() de la propriété de Transformation CSS transform permet de déplacer sur l'axe Z d'un élément HTML par rappo...[ translatez() ]