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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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.
Syntaxe
/* Keyword values */ transform: none; /* Valeurs fonctionnelles */ 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, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 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); /* Valeurs avec plusieurs fonctions */ transform: translateX(10px) rotate(10deg) translateY(5px); /* 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>où
<transform-list> = <transform-function>+où
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>où
<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> )où
<length-percentage> = <length> | <percentage>
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. |
| 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 initiale | none |
|---|---|
| Applicabilité | éléments transformables |
| Héritée | non |
| Pourcentages | se rapporte à la taille de la boîte de l'élément |
| Média | visuel |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | une transformation |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
| Crée un contexte d'empilement | oui |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 36 Oui -webkit- | 12 -webkit- | 16 49 -webkit- | 103 11 -webkit- | 12.1 15 -webkit- 10.5 — 15 -o- | 9 3.1 -webkit- |
| 3D support | 12 | 12 | 10 | 105 | 15 | 4 |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | 2.1 -webkit- 1 | Oui -webkit- | Oui -webkit- | 16 49 -webkit- | 11.5 -webkit- | 9 3.2 -webkit- | Oui |
| 3D support | 3 -webkit- | Oui | Oui | Oui | 22 | 3.2 | Oui |
1. Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.
2. 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.
3. Internet Explorer does not support the global values initial and unset.
4. Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.
5. 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.