Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Transform - Propriété CSS

transform

Résumé des caractéristiques de la propriété transform

Description rapide
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
Statut
Standard
Utilisable sur
HTML, SVG
Pourcentages
Calculés par rapport aux dimensions de reference box.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété transform passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Transformations
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de transform.

transform - Syntax DiagramSyntax diagram of the transform CSS property. none none transform transformtransform:;transform:;
Schéma syntaxique de la propriété transform
Description des valeurs et exemples

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

Description des termes utilisés sur le schéma :

  • transform est une transformation décrite par l'une des fonctions rotate(), scale(), skew(), translate(), matrix(), ou perspective(), ainsi que les variantes 3D de ces fonctions : rotateX(), rotateY(), rotateZ(), rotate3d(), scaleX(), scaleY(), scaleZ(), scale3d(), skewX(), skewY(), translateX(), translateY(), translateZ(), translate3d(), matrix3d().
  • La syntaxe peut être répétée plusieurs fois en séparant les occurrences par un espace.

Description de la propriété transform.

Définit les transformations géométriques à appliquer à l'élément. Cela peut-être des rotations, des translations, des inclinaisons, des changements de taille, ou un enchaînement de plusieurs de ces transformations.

Les éléments de type inline (les balises a par exemple) ne peuvent pas être transformés, de même que les éléments d'un tableau (lignes, colonnes, cellules).

Cliquez sur les exemples ci-dessous pour voir leur code CSS.

Ce bloc de texte a subi une rotation de 10 degrés

Celui-ci a été incliné.
Celui-ci a été décalé vers le bas (axe Y).
La hauteur de cet élément a été réduite (axe Y).

Les transformations sont appliquées après que la mise en page soit réalisée, et ne modifient pas cette mise en page : par exemple, le déplacement d'un élément ne déplace pas les éléments qui le suivent. Il est donc possible que les transformations provoquent la superposition de plusieurs éléments.

Reportez-vous également à la description des fonctions relatives aux transformations : translate(), rotate(), , scale(), ainsi qu'aux pages sur les nouvelles propriété translate, rotate et scale, qui appliquent avec une syntaxe plus simple une transformation unitaire.

Axes.

Chacune des transformations s'effectue suivant un axe X, Y ou Z. Le plan de l'écran est défini par les axes X et Y (2D), tandis que l'axe Z introduit le 3D.

Les 3 axes CSS pour les transformations

  • L'axe x est l'axe horizontal, de gauche à droite dans le plan de l'écran.
  • L'axe y est l'axe vertical, du haut vers le bas dans le plan de l'écran.
  • L'axe z est l'axe qui va de l'écran vers l'observateur.
    Les transformations suivant l'axe Z sont souvent des transformations 3D, sauf les rotations qui, lorsqu'elles sont réalisées autour de l'axe z, restent dans le plan de l'écran.

Transformations successives.

Les axes sont liés à l'élément lui-même, c'est à dire qu'ils se déplacent ou s'orientent en fonction de la position et de l'orientation de l'élément.

Plusieurs transformations successives peuvent être appliquées à un élément. Bien entendu, il ne faut pas écrire plusieurs règles avec la propriété transform car la dernière rencontrée remplacerait la ou les précédentes. Il convient d'écrire toutes les transformations les unes à la suite des autres dans une seule propriété transform. L'ordre dans lequel sont décrites les transformations est très important.

Rotation suivie d'une translation
Une rotation suivie d'une translation

Translation suivie d'une rotation
La même translation suivie de la même rotation

Matrice de transformation.

Toutes les transformations appliquées à un élément peuvent se résumer par une matrice de 9 valeurs dans le cas de transformations 2D, et de 16 valeurs pour une transformation en 3D.
Les fonctions matrix() et matrix3d() permettent au concepteur d'écrire directement ces matrices, sans passer par les transformations unitaires.

Les coordonnées d'un élément transformé (x' et y') sont obtenues en multipliant la matrice de transformation par les coordonnées d'origine (x et y). Cette opération est réalisée pour chacun des coins de l'élément.

Matrice de transformation
Matrice de transformation en 2D

Syntaxes pour transform.

  • transform:none;

    Aucune transformation n'est appliquée.

  • transform: translate(50px, 30px); transform: translate3d(50px, 30px, 10px); transform: translateX(50px); transform: translateY(30px); transform: translateZ(10px);

    Les fonctions de translation provoquent un décalage de l'élément, sans le déformer. translate(), translateX() et translateY() agissent dans le plan de l'écran, tandis que translate3d() et translateZ() interviennent en 3D.

    Translation avec la fonction translate()

    Pour davantage d'informations, reportez-vous à la description de ces fonctions :

    1. translate() : Applique une translation (un déplacement ) à un élément..
    2. translate3d() : Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z..
    3. translateX() : Définit une translation suivant l'axe X (horizontalement)..
    4. translateY() : Définit une translation suivant l'axe Y (verticalement)..
    5. translateZ() : Définit une translation suivant l'axe Z (perpendiculaire à l'écran)..
  • transform: rotate(15deg); transform: rotate3d(1,0,0,15deg); transform: rotateX(10deg); transform: rotateY(25deg); transform: rotateZ(15deg);

    Ces fonctions provoquent une rotation de l'élément, suivant l'un des axes, ou, pour rotate3d(), suivant un axe quelconque. rotate() et rotateZ() effectuent une rotation dans le plan de l'écran (en 2D). Les autres fonctions sont des fonctions de transformation en 3D.

    Rotation avec la fonction rotate()

    Reportez-vous à la description des fonctions de rotatin pour une présentation plus précise de leur syntaxe.

    1. rotate() : Définit une rotation de l'élément en 2D (dans le plan de l'écran)..
    2. rotate3d() : Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D..
    3. rotateX() : Définit une rotation de l'élément autour de l'axe X (en 3D),.
    4. rotateY() : Définit une rotation 3D de l'élément autour de l'axe Y..
    5. rotateZ() : Définit une rotation de l'élément autour de l'axe Z..
  • transform: skew(15deg,10deg); transform: skewX(15deg); transform: skewY(10deg);

    Ces fonctions provoquent une inclinaison (une déformation) de l'élément. On parle aussi parfois d'un cisaillement de l'élément. Ces fonctions agissent toutes n 2D, dans le plan de l'écran.

    Déformation avec la fonction skew()

    Consultez aussi la description des fonctions de cisaillement :

    1. skew() : Définit une inclinaison de l'élément suivant les axes X et/ou Y..
    2. skewX() : Définit une inclinaison de l'élément suivant l'axe X..
    3. skewY() : Définit une inclinaison de l'élément suivant l'axe Y..
  • transform: scale(2); transform: scale3d(2,1,3); transform: scaleX(2); transform: scaleY(2); transform: scaleZ(2);

    Ces fonctions changent les dimensions de l'élément en l'agrandissant ou en le réduisant.
    scale(), scaleX() et scaleY() agissent dans le plan de l'écran, c'est à dire en 2D, tandis que scale3d() et scaleZ() agissent en 3D.

    Agrandissement avec la fonction scale()

    Reportez-vous à la description des fonctions de mise à l'échelle pour plus d'informations :

    1. scale() : Définit un agrandissement ou une réduction de l'élément..
    2. scale3d() : Définit une mise à l'échelle en 3D..
    3. scaleX() : Définit une mise à l'échelle suivant l'axe X..
    4. scaleY() : Définit une mise à l'échelle suivant l'axe Y..
    5. scaleZ() : Définit une mise à l'échelle suivant l'axe Z..
  • transform: perspective(50px) rotateY(-5deg);

    La fonction perspective() s'utilise avec une ou plusieurs autres fonctions de transformation. Elle définit l'effet de perspective pour l'élément transformé suivant une méthode 3d.

    Effet de perspective avec la fonction perspective()

    Reportez-vous à la description de la fonction perspective().

  • transform: matrix(1, 2, 0.5, 0.25, 1, 1); transform: matrix3d(1, 0.5, ...);

    Ces fonctions, assez complexes à utiliser, permettent de définir n'importe quelle transformation ou succession de transformations.
    Reportez-vous à la description des fonctions matrix() et matrix3d().

  • transform: perspective(50px) translateX(20px) rotateZ(45deg);

    Plusieurs transformations successives peuvent être appliquées à l'élément : il suffit de les énumérer en les séparant par un espace.

    L'ordre dans lequel les transformations sont citées influence le résultat final.
    Si la fonction perspective() est utilisée dans une série de transformations, elle doit être citée en premier.

Valeurs communes :

transform: initial (none) transform: inherit transform: revert transform: revertLayer transform: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété transform.

Les possibilités d'animation avec la propriété transform et toutes les fonctions de transformation sont innombrables : laissez parler votre imagination.




Manipulation de la propriété transform par programme.

En Javascript, deux syntaxes sont possibles pour modifier la valeur de transform pour un élément el. La première syntaxe fait appel à une notation du type tableau, avec des crochets, tandis que la deuxième est plus une notation du type objet.


function setTransform(el) {
el.style['transform']='rotate(10deg)';
}
ou

function setTransform(el) {
el.style.transform='rotate(10deg)';
}

Voici les codes pour lire la valeur de transform. La propriété doit avoir été affectée directement à l'élément lui-même et non pas à une classe. La valeur de transform est renvoyée sous la forme qui a été utilisée pour la définir dans la feuille de styles.


function getTransform(el) {
return el.style['transform'];
}
ou

function getTransform(el) {
return el.style.transform;
}

Enfin, voici un code Javascript pour lire la valeur calculée de transform. La valeur est retournée sous la forme matrix( 6 valeurs ) si la transformation actuelle est dans le plan de l'écran (transformation 2D), ou sous la forme matrix3d( 16 valeurs ) s'il s'agit d'une transformation 3D.


function getTransform(el) {
return window.getComputedStyle(el).getPropertyValue('transform');
}

Avec JQuery, voici les exemples de code pour modifier et lire la valeur calculée de la propriété transform. Comme en Javascript, la valeur retournée est sous la forme d'une fonction matrix() ou matrix3d().


function setTransform(el) {
$(el).css('transform','rotate(10deg)');
}

function getTransform(el) {
return $(el).css('transform');
}

Prise en charge des transformations suivant les navigateurs.

Il convient de distinguer les transformations en 2D, c'est à dire dans le plan de l'écran (axes X et Y), et les transformations 3D, qui peuvent concerner l'axe Z, ainsi que les effets de perspective. Mais dans tous les cas, l'ensemble des navigateurs actuels traitent correctement les transformations.

1
Transformations
2D
2
Transformations
3D
Estimation de la prise en charge globale.
98%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 109

Baidu Browser

Version testée : 13.18

Chrome

Version testée : 109

Chrome pour Androïd

Version testée : 109

Edge

Version testée : 109

Firefox

Version testée : 109

Firefox pour Androïd

Version testée : 107

Internet Explorer

Version testée : 11

KaiOS Browser

Version testée : 2.5

Opéra

Version testée : 92

Opéra Mobile

Version testée : 72

QQ Browser

Version testée : 13.1

Safari

Version testée : 16.3

Safari sur IOS

Version testée : 16.3

Samsung Internet

Version testée : 19.0

UC Browser pour Androïd

Version testée : 13.4

Opéra mini

Version testée : Toutes
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la propriété transform.

  • Module CSS - Transformations - Niveau 1

    Première définition des transformations CSS (en 2D) et introduction de la propriété transform.
    WD
    28 Février 2012
    Document de travail.
    CR
    14 Février 2019
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Transformations - Niveau 2

    Introduction des transformations en 3D, mais pas de changement concernant directement la propriété transform.
    WD
    03 Mars 2020
    Document de travail.
    CR
    PR
    REC

Voir aussi, concernant les transformations.

Le module "Module CSS - Transformations" (ou CSS Transforms Module en anglais) décrit la propriété transform, et regroupe également toutes les définitions concernant les transformations en CSS :

Propriétés :

backface-visibility
Visibilité de la face arrière de l'élément (pendant sa rotation).
perspective
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
perspective-origin
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
rotate
Définit une rotation de l'élément.
scale
Définit un mise à l'échelle de l'élément (agrandissement ou réduction).
transform-box
Définit la boîte de référence pour les transformations.
transform-origin
Point d'origine pour les transformations.
transform-style
Rendu des éléments soumis à une transformation 3D.
translate
Définit une translation de l'élément (un déplacement).

Fonctions :

matrix()
Applique une transformation composite à un élément (translations, rotations...)
matrix3d()
Applique une série de transformations 3D à un élément.
perspective()
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
rotate()
Définit une rotation de l'élément en 2D (dans le plan de l'écran).
rotate3d()
Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D.
rotateX()
Définit une rotation de l'élément autour de l'axe X (en 3D),
rotateY()
Définit une rotation 3D de l'élément autour de l'axe Y.
rotateZ()
Définit une rotation de l'élément autour de l'axe Z.
scale()
Définit un agrandissement ou une réduction de l'élément.
scale3d()
Définit une mise à l'échelle en 3D.
scaleX()
Définit une mise à l'échelle suivant l'axe X.
scaleY()
Définit une mise à l'échelle suivant l'axe Y.
scaleZ()
Définit une mise à l'échelle suivant l'axe Z.
skew()
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
skewX()
Définit une inclinaison de l'élément suivant l'axe X.
skewY()
Définit une inclinaison de l'élément suivant l'axe Y.
translate()
Applique une translation (un déplacement ) à un élément.
translate3d()
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
translateX()
Définit une translation suivant l'axe X (horizontalement).
translateY()
Définit une translation suivant l'axe Y (verticalement).
translateZ()
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).