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.

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: 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);

/* 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

Compatibilité des navigateurs

Voir aussi

• Utiliser les transformations CSS
• Le type de donnée <transform-function>
• Plus d'informations sur les rotations CSS3 et les filtres matriciels sur le blog de Paul Irish
• Un plugin jQuery pour les transformations 2D