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.
/* 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, 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); /* Avec plusieurs fonctions */ transform: translateX(10px) rotate(10deg) translateY(5px); /* Valeurs globales */ transform: inherit; transform: initial; transform: unset;
<div id="container">
<div class="subcontainer">
<img class="none" src="https://mdn.mozillademos.org/files/15157/firefox.png">
<div class="caption">none</div>
</div>
<div class="subcontainer">
<img class="translate" src="https://mdn.mozillademos.org/files/15157/firefox.png">
<div class="caption">translate</div></div>
<div class="subcontainer">
<img class="scale" src="https://mdn.mozillademos.org/files/15157/firefox.png">
<div class="caption">scale</div>
</div>
<div class="subcontainer">
<img class="skew" src="https://mdn.mozillademos.org/files/15157/firefox.png">
<div class="caption">skew</div>
</div>
<div class="subcontainer">
<img class="rotate" src="https://mdn.mozillademos.org/files/15157/firefox.png">
<div class="caption">rotate</div>
</div>
#container {
width: 100%;
height: 300px;
background-color: #F4F7F8;
display: flex;
}
.subcontainer {
border: 1px solid black;
width: 100%;
height: 250px;
margin: 10px;
padding: 10px;
background-color: white;
position: relative;
}
.caption {
color: black;
font-family: monospace;
font-weight: bold;
position: absolute;
bottom: 10px;
}
.none {
transform: none;
}
.translate {
transform: translate(0, 80px);
}
.scale {
transform: scale(2);
}
.skew {
transform: skew(30deg, 20deg);
}
.rotate {
transform: rotate(0.5turn);
}
img {
max-width: 100%;
max-height: 100%;
}
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 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 |
Syntaxe
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. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple |
(Oui) -webkit |
3.5 (1.9.1)-moz[1] 16.0 (16.0)[2] |
(Oui)-webkit (Oui) |
9.0-ms[3] 10.0 |
10.5-o 12.10 15.0-webkit 23 |
3.1-webkit 9.0 |
| Support de la 3D | 12.0-webkit 36 |
10.0-moz 16.0 (16.0) |
(Oui) | 10.0 | 15.0-webkit 23 |
4.0-webkit 9.0 |
| Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Support simple | 2.1-webkit[4] | (Oui)-webkit | (Oui) | (Oui)-webkit (Oui) |
(Oui) 11.0-webkit[5] |
11.5-webkit | 3.2 (Oui)-webkit 9.0 |
| Support de la 3D | 3.0-webkit | (Oui)-webkit | (Oui) | (Oui) | (Oui) | 22-webkit | 3.2 (Oui)-webkit 9.0 |
[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>.
En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.
[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.