Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
transform
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 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
transform: matrix(1, 2, 3, 4, 5, 6);transform: translate(120px, 50%);transform: scale(2, 0.5);transform: rotate(0.5turn);transform: skew(30deg, 20deg);transform: scale(0.5) translate(-100%, -100%);<section> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>Si la propriété est différente denone, uncontexte d'empilement sera créé. Dans ce cas, l'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ontposition: fixed; ouposition: absolute;.
Attention :Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec desboîtes en ligne non-remplacées, descolonnes de tableau ou desgroupes de colonnes de tableau ne peuvent pas être transformés.
Syntaxe
/* 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 plusieursfonctions 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.
noneAucune transformation ne sera appliquée.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | éléments transformables |
| Héritée | non |
| Pourcentages | se rapporte à la taille de la boîte de l'élément |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | une transformation |
| Crée uncontexte d'empilement | oui |
Syntaxe formelle
transform =
none|
<transform-list>
<transform-list> =
<transform-function>+
Note :Si on utilise plusieurs fonctions dontperspective(), celle-ci devra apparaître en premier.
Exemples
Voir la page surl'utilisation des transformations CSS, {(cssxref("<transform-function>")}} 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;}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édiaprefers-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 |
| Scalable Vector Graphics (SVG) 2 # TransformProperty |