transform

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Résumé

La propriété CSS transform permet de modifier les coordonnées spatiales du modèle de formatage visuel de CSS. En l'utilisant, les éléments pourront subir des translations, rotations, homothéties ou être inclinées selon les valeurs définies.

Si la valeur de la propriété est différente de none, un contexte d'empilement est créé. Dans ce cas l'objet se comportera comme un bloc contenant pour les éléments utilisant position: fixed qu'il contient.

  • Valeur initiale none
  • S'applique à éléments transformables
  • Héritée non
  • Pourcentages se rapporte à la taille de la boîte de l'élément
  • Média visual
  • Valeur calculée comme spécifié, mais avec les longueurs relatives transformées en longueur absolues
  • Animable oui, comme une transformation
  • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Syntaxe formelle : none | <transform-function>+
transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform: translateX(10px) rotate(10deg) translateY(5px)

Valeurs

<transform-function>
Une ou plusieurs des fonctions de transformation CSS sont appliquées. Voir ci-dessous.
none
Spécifie qu'aucune transformation ne doit être appliquée.

Exemples

Voir Utilisation des transformations CSS.

Exemple en direct

 

 

 

pre {
     width: 33em;
     border: solid red;

    -moz-transform: translate(100px) rotate(20deg);
    -moz-transform-origin: 60% 100%;

    -webkit-transform: translate(100px) rotate(20deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(20deg); 
    -o-transform-origin:60% 100%;

    -ms-transform: translate(100px) rotate(20deg);
    -ms-transform-origin: 60% 100%;

    transform: translate(100px) rotate(20deg);
    transform-origin: 60% 100%;
}



Fonctions de transformation CSS

La propriété CSS transform permet que le système de coordonnées utilisé par un élément soit manipulé par une ou des fonctions de transformation. Ces fonctions sont décrites ci-dessous.

matrix

transform:  matrix(a, c, b, d, tx, ty)

/* Où a, b, c, d construisent la matrice de transformation
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   et tx, ty sont les valeurs de translation.  */

Spécifie une transformation 2D grâce à six valeurs. Ceci est équivalent à appliquer la transformation matrix [a b c d tx ty].

Note : Gecko (Firefox) accepte une valeur de <longueur> pour tx et ty. Webkit (Safari, Chrome) et Opera supportent actuellement un <number> sans unité pour tx et ty.

Exemples en direct

 

 

 background: gold;  width: 30em;

    -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
     -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
 background: wheat;
 max-width: intrinsic;

    -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);
 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
     -ms-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);

Pour aller plus loin

rotate

transform:  rotate(angle);       /* un <angle>, p. ex.  rotate(30deg) */

Applique une rotation dans le sens horaire autour de son origine (comme spécifiée par la propriété transform-origin) de l'angle spécifié. L'opération correspond à la matrice [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

scale

transform:  scale(sx[, sy]);     /* un ou deux <nombre>s sans unité, p. ex.  scale(2.1,4) */

Spécifie une homothétie 2D décrite par [sx, sy]. Si sy n'est pas spécifiée, il est supposé qu'elle est égale à sx.

scaleX

transform:  scaleX(sx);          /* un <nombre> sans unité, p. ex.  scaleX(2.7) */

Spécifie une homothétie utilisant le vecteur [sx, 1].

scaleY

transform:  scaleY(sy)           /* un <nombre> sans unité, p. ex.  scaleY(0.3) */

Spécifie une homothétie utilisant le vecteur [1, sy].

skew Non standard

transform:  skew(ax[, ay])       /* un ou deux <angle>s, p. ex.  skew(30deg,-10deg) */

Incline l'élément autour des axes X et Y des angles spécifiés. Si ay n'est pas définie, aucune inclinaison n'est réalisée suivant l'axe Y.

Note : la fonction skew() était présente dans les premiers brouillons. Elle a depuis été retirée et est toujours présente sous une forme préfixée dans certaines implémentations. Ne l'utilisez pas.

skewX

transform:  skewX(angle)         /* un <angle>, p. ex.  skewX(-30deg) */

Incline l'élément autour de l'axe X du l'angle spécifié.

skewY

transform:  skewY(angle)         /* un <angle>, p. ex.  skewY(4deg) */

Incline l'élément autour de l'axe Y du l'angle spécifié.

translate

transform:  translate(tx[, ty])  /* une ou deux <longueur>s */

Spécifie une translation 2D par le vecteur [tx, ty]. Si ty n'est pas spécifié, la valeur supposée est zéro.

translateX

transform:  translateX(tx)       /* voir <longuieur> pour les valeurs possibles */

Translate l'élément de la quantité définie selon l'axe X.

translateY

transform:  translateY(ty)       /* voir <longueur> pour les valeurs possibles */

Translate l'élément de la quantité définie selon l'axe Y.

Spécifications

Spécification Statut Commentaire
CSS Transforms Level 1 Working Draft  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base (Oui) -webkit 3.5 (1.9.1)-moz 10.0
9.0 -ms
10.5-o 3.1-webkit
Support de la 3D 10.0-moz 12.0-webkit 10.0 Pas de support 4.0-webkit
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ? ?

Notes

Internet Explorer 5.5 et plus supporte un filtre matriciel propriétaire qui peut être utilisé pour réaliser des effets similaires.

Le support expérimental de skew() à été retiré de Gecko 14.0.

Voir également

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : lmorchard, teoli, FredB
Dernière mise à jour par : FredB,
Masquer la barre latérale