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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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'é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
/* 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);
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 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>#{6} )
<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> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )où
<length-percentage> = <length> | <percentage>
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
<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é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
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. |
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 un contexte d'empilement | oui |
Compatibilité des navigateurs
BCD tables only load in the browser