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.

La propriété transform permet de modifier l'espace de coordonnées utilisé pour la mise en forme visuelle. Grâce à cette propriété, il est possible de translater les éléments, de les tourner, d'appliquer des homothéties, de les distordre pour en changer la perspective.

Si la propriété est différente de none, un contexte d'empilement sera créé. Dans ce cas, l'objet agira comme le bloc englobant pour les éléments qu'il contient et qui ont position: fixed.

Valeur initialenone
Applicabilitééléments transformables
Héritéenon
Pourcentagesse rapporte à la taille de la boîte de l'élément
Médiavisuel
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Animableoui, comme une transformation
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle
Crée un contexte d'empilementoui

Syntaxe

/* Avec un mot-clé */
transform: none;

/* Avec des fonctions */
/* Type <transform-function> */
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: skew(30deg, 20deg);
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);

/* Avec plusieurs fonctions */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Valeurs globales */
transform: inherit;
transform: initial;
transform: unset;

Valeurs

<transform-function>
Une ou plusieurs fonctions de transformation CSS à appliquer.
none
Aucune transformation ne sera appliquée.

Syntaxe formelle

none | <transform-list>


<transform-list> = <transform-function>+


<transform-function> = [ <matrix()> || <translate()> || <translateX()> || <translateY()> || <scale()> || <scaleX()> || <scaleY()> || <rotate()> || <skew()> || <skewX()> || <skewY()> || <matrix3d()> || <translate3d()> || <translateZ()> || <scale3d()> || <scaleZ()> || <rotate3d()> || <rotateX()> || <rotateY()> || <rotateZ()> || <perspective()> ]+


<matrix()> = matrix( <number> [, <number> ]{5,5} )
<translate()> = translate( <length> | <percentage> [, <length> | <percentage> ]? )
<translateX()> = translateX( <length> | <percentage> )
<translateY()> = translateY( <length> | <percentage> )
<scale()> = scale( <number> [, <number> ]? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( <angle> )
<skew()> = skew( <angle> [, <angle> ]? )
<skewX()> = skewX( <angle> )
<skewY()> = skewY( <angle> )
<matrix3d()> = matrix3d( <number> [, <number> ]{15,15} )
<translate3d()> = translate3d( <length> | <percentage> , <length> | <percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number>, <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
<rotateX()> = rotateX( <angle> )
<rotateY()> = rotateY( <angle> )
<rotateZ()> = rotateZ( <angle> )
<perspective()> = perspective( <length> )

Exemples

Voir la page sur l'utilisation des transformations CSS ou l'exemple suivant.

HTML

<p>L'élément transformé</p>

CSS

p {
  border: solid red;

  -webkit-transform: translate(100px) rotate(20deg);
  -webkit-transform-origin: 0 -250px;

  transform: translate(100px) rotate(20deg);
  transform-origin: 0 -250px;
}

Spécifications

Spécification État Commentaires
CSS Transforms Level 1
La définition de 'transform' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple

(Oui) -webkit
36

3.5 (1.9.1)-moz[1]
16.0 (16.0)[2]
9.0-ms[3]
10.0
10.5-o
12.10
15.0-webkit
23
3.1-webkit
Support de la 3D 12.0-webkit
36
10.0-moz
16.0 (16.0)
10.0 15.0-webkit
23
4.0-webkit
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 2.1-webkit[4] (Oui)-webkit (Oui) (Oui)
11.0-webkit[5]
11.5-webkit 3.2 (Oui)-webkit
Support de la 3D 3.0-webkit (Oui)-webkit (Oui) (Oui) 22-webkit 3.2 (Oui)-webkit

[1] Gecko 14.0 a retiré le support expérimental de skew() mais celui-ci fut réintroduit avec Gecko 15.0 pour des raisons de compatibilité. Cette opération est non-standard et sera vraisemblablement retirée à l'avenir, ne l'utilisez pas.

[2] Avant Firefox 16, les valeurs des translations pour matrix() et matrix3d() pouvaient être des valeurs de type <length>, en plus des valeurs <number>.

[3] Internet Explorer 5.5 et les versions supérieures supportent un filtre matriciel propriétaire qui peut être utilisé pour obtenir un effet similaire.

Internet Explorer 9.0 et les versions antérieures ne supportaient pas les transformations tridimensionnelles. Mélanger des opérations 3D et 2D (par exemple -ms-transform:rotate(10deg) translateZ(0);) empêchera l'ensemble de la propriété d'être appliqué.
Internet Explorer ne prend pas en charge les valeurs globales initial et unset.

[4] Android 2.3 a un bug qui cause des « sautes » de saisie dans un formulaire de saisie si un élément englobant a une déclaration -webkit-transform.

[5] Internet Explorer 11.0 supporte le préfixe -webkit comme une variante pour la propriété standard.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Prinz_Rana, Sebastianz, Sheppy, teoli, FredB, lmorchard
 Dernière mise à jour par : SphinxKnight,