Scale() - Fonction CSS

Description des fonctions de mise à l'échelle.

Description des fonctions scaleX(), scaleY() et scaleZ().

Utilisées avec la propriété transform, ces fonctions définissent un changement de taille de l'élément (agrandissement ou réduction) suivant l'un des axes.

L'axe X correspond à l'horizontale, Y à la verticale, et l'axe Z est perpendiculaire au plan de l'écran.

scaleZ() n'a aucun effet visible sur un élément situé dans le plan de l'écran, car cette fonction agit sur l'épaisseur de l'élément (axe Z). Cette dernière étant égale à 0, la multiplier par un coefficient quelconque ne change rien. Mais si l'élément et sorti du plan de l'écran par une fonction translateZ() par exemple, l'effet de scaleZ() devient visible.
transform-origin peut également rendre visibles les transformations suivant l'axe Z en définissant une origine hors du plan de l'écran.
Dans tous les cas il faut également appliquer un effet de perspective (avec la fonction perspective()) pour voir l'effet de scaleZ().

Reportez-vous également aux pages suivantes :

• transform : la propriété qui permet d'appliquer les transformations.
• transform-origin : une propriété qui définit le point qui restera fixe pendant une transformation. par défaut ce point est situé au centre de l'élément.

Description de la fonction scale().

La fonction scale() remplace en une seule écriture les fonctions scaleX() et scaleY(). Elle accepte deux valeurs ou deux pourcentages.

Description de la fonction scale3d().

La fonction scale3d() remplace en une seule écriture les trois fonctions scaleX(), scaleY() et scaleZ() Elle accepte trois valeurs, qui peuvent également être des pourcentages.

Ces fonctions peuvent être utilisées avec :

• transform : Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).

Syntaxe de ces fonctions de mise à l'échelle.

Sur les exemples ci-dessous, le rectangle en trait fin représenter les dimensions originales de l'élément. Le rectangle en trait épais est l'élément après sa transformation.

• transform: scaleX(0.5); transform: scaleY(2); transform: scaleZ(1.5);

  Les trois fonctions attendent une valeur qui peut être un nombre sans unité ou un pourcentage. Les pourcentages sont calculés par rapport à la dimension originale de l'élément, dans le sens correspondant : largeur pour scaleX(), hauteur pour scaleY(), et épaisseur pour scaleZ().

  Les valeurs négatives sont acceptées et provoquent un retournement de l'élément (symétrie).

  transform:scaleX(0.5);
 

  transform:scaleY(1.5);
 

  transform:scaleZ(1.5);
 

  transform-origin:center center -20px; transform:perspective(50px) scaleZ(1.5);
• transform: scale(0.7, 1); x y

  x et y sont les coefficients à utiliser pour changer la taille de l'élément suivant l'axe correspondant. Si une seule valeur est indiquée, elle est appliquée aussi bien suivant l'axe X que suivant l'axe Y, ce qui permet de conserver les proportions de l'élément.

  Ce sont deux nombres sans unité inférieurs à 1 (réduction de la dimension) ou supérieurs (agrandissement).
  Les pourcentages peuvent utilisés et sont évalués par rapport à la dimension originale correspondante.

  Les valeurs négatives sont acceptées et provoquent un retournement de l'élément (symétrie).

  transform:scale(0.7, 0.8);
• transform: scale3d(0.7, 0.8, 1.5); x y z

  x, y et z sont les coefficients à utiliser pour changer la taille de l'élément suivant l'axe correspondant. Les trois valeurs doivent être indiquées.

  Ce sont trois nombres sans unité inférieurs à 1 (réduction de la dimension) ou supérieurs (agrandissement).
  Les pourcentages peuvent utilisés et sont évalués par rapport à la dimension originale correspondante.

  Les valeurs négatives sont acceptées et provoquent un retournement de l'élément (symétrie).

  transform:scale(0.7, 0.8, 1.5);
 

  transform-origin:center center 20px; transform:perspective(50px) scale(0.7, 0.8, 1.5);

Simulateur avec la fonction scale().

Le simulateur applique également la propriété transform-origin:center center 20px; et insère la fonction perspective(50px) dans la propriété transform afin de rendre visibles les transformations suivant l'axe Z.

Compatibilité et prise en charge des transformations 2D ou 3D.

Les transformations 2D et 3D sont correctement traitées par les navigateurs actuels. La fonction scale() et ses dérivées scaleX(), scaleY(), scaleZ() sont également bien reconnues.

Remarques :

(1) Ne supporte pas les transformations 2D sur les éléments SVG. Utilisez l'attribut transform à la place.

(2) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

1

Transformations
2D

2

Transformations
3D

3

Fonction
scale()

4

Fonction
scale3d()

Estimation de la prise en charge globale.

97%

97%

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Historique des fonctions de mise à l'échelle.

• Module CSS - Transformations - Niveau 1

  Premier niveau de spécification concernant les transformations en 2D.
  Présentation des différentes fonctions de transformation dont scale(), scaleX() et scaleY().
  

  28 Février 2012

  Document de travail.

  

  14 Février 2019

  Candidat à la recommandation.

  

  

• Module CSS - Transformations - Niveau 2

  Niveau 2 de la spécification sur les transformations, introduisant les transformations en 3D.
  Ajout des fonctions scaleZ() et scale3d().
  Les fonctions 2D scale(), scaleX() et scaleY() acceptent maintenant les valeurs en pourcentages.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant les transformations.

Le module de spécification CSS Transforms Module regroupe toutes les propriétés et fonctions concernant les transformations en CSS. La fonction scale() est décrite dans ce module, ainsi que toutes les suivantes :

Propriétés :

Fonctions :