transform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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.

Exemple interactif

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

css
/* Keyword values */
transform: none;

/* Valeurs fonctionnelles */
transform: matrix(1, 2, 3, 4, 5, 6);
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, 3, 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 sont composées entre elles de gauche à droite, ce qui signifie que les transformations composées sont en pratique appliquées de droite à gauche.

none

Aucune transformation ne sera appliquée.

Définition formelle

Valeur initialenone
Applicabilitééléments transformables
Héritéenon
Pourcentagesse rapporte à la taille de la boîte de l'élément
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationune transformation
Crée un contexte d'empilementoui

Syntaxe formelle

transform = 
  none              |
  <transform-list>  

<transform-list> = 
  <transform-function>+

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

html
<p>L'élément transformé</p>

CSS

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

Specification
CSS Transforms Module Level 2
# transform-functions
CSS Transforms Module Level 1
# transform-property

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi