transform

La propriété transform modifie 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'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ont position: fixed; ou position: absolute;.

Attention ! Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des boîtes en ligne non-remplacées, des colonnes de tableau ou des groupes de colonnes de tableau ne peuvent pas être transformés.

Syntaxe

/* Keyword values */
transform: none;

/* Valeurs fonctionnelles */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: translate3d(12px, 50%, 3em);

transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: scale3d(2.5, 1.2, 0.3);

transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

transform: rotate(0.5turn);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: rotate3d(1, 2.0, 3.0, 10deg);

transform: perspective(17px);

/* Valeurs avec plusieurs fonctions */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

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

La propriété transform peut être définie avec le mot-clé none ou une ou plusieurs valeurs de type <transform-function>.

Valeurs

<transform-function>
Une ou plusieurs fonctions de transformation CSS à appliquer. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de gauche à droite.
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>#{6} )
<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> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )


<length-percentage> = <length> | <percentage>

Note : Si on utilise plusieurs fonctions dont perspective(), celle-ci devra apparaître en premier.

Exemples

Voir la page sur l'utilisation des transformations CSS, {(cssxref("<transform-function>")}} 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;
}

Accessibilité

Les animations de déplacement ou de zoom peuvent poser des problèmes d'accessibilité en déclenchant certaines migraines. Si vous devez inclure des animations sur votre site web, vous devez fournir aux utilisateurs une méthode qui leur permette de réduire voire de désactiver les animations sur l'ensemble du site.

À cet égard, on pourra utiliser la caractéristique média prefers-reduced-motion qui permet d'utiliser une requête média pour désactiver les animations si l'utilisateur a indiqué une telle préférence via son système / son navigateur.

Pour en savoir plus :

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.
CSS Transforms Level 2
La définition de 'transform' dans cette spécification.
Brouillon de l'éditeur Ajout des fonctions de transformation en 3D.
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
Type d'animationune transformation
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle
Crée un contexte d'empilementoui

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
transformChrome Support complet 36
Support complet 36
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 16
Support complet 16
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10
Notes
Support complet 10
Notes
Notes Internet Explorer does not support the global values initial and unset.
Support complet 11
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 9
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.
Opera Support complet 23
Support complet 23
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 12.1 — 15
Aucun support 10.5 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari Support complet 9
Support complet 9
Support complet 3.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 37
Support complet 37
Support complet 2
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.
Chrome Android Support complet 36
Support complet 36
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 16
Support complet 16
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 24
Support complet 24
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 12.1 — 14
Aucun support 11 — 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Safari iOS Support complet 9
Support complet 9
Support complet 3.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 3.0
Support complet 3.0
Support complet 1.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
3D supportChrome Support complet 12Edge Support complet 12Firefox Support complet 16IE Support complet 10
Notes
Support complet 10
Notes
Notes Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as -ms-transform:rotate(10deg) translateZ(0);, will prevent the entire property from being applied.
Opera Support complet 15Safari Support complet 4WebView Android Support complet 3
Préfixée
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 18Firefox Android Support complet 16Opera Android Support complet 14Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi