transform

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: 550px;
   height: 250px;
   background-color: #F4F7F8;
   display: flex;
}

.subcontainer {
  border: 1px solid black;
  height: 200px;
  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.

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 droite à gauche.

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

Compatibilité des navigateurs

[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.

Voir aussi

• Utiliser les transformations CSS
• Le type de données <translation-function>
• Plus d'informations sur les rotations CSS3 et les filtres matriciels sur le blog de Paul Irish