Les fonctions de mise à l'échelle : scaleX(), scaleY(), scaleZ() et scale3d().

scale()

scaleX()

scaleY()

scaleZ()

scale3d()

Résumé des caractéristiques de la fonction `scale()`

Description rapide

Définit un agrandissement ou une réduction de l'élément.

Statut

Standard

Pourcentages

Calculés par rapport à la largeur et la hauteur de l'élément.

Module W3C

Module CSS - Transformations

Références (W3C)

CSS Transforms Module Level 1

Statut du document: CR (document candidat à la recommandation)

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

Ces fonctions définissent un changement de taille de l'élément (agrandissement ou réduction) suivant l'un des axes. scaleZ() n'a aucun effet visible 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.

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

Les trois axes de transformation

scale() permet une mise à l'échelle suivant les trois axes, c'est en fait un raccourci pour les fonctions scaleX(), scaleY() et 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.

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.

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: scale(0.5, 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 duex 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: scale3d(0.5, 1, 0.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).

Simulateur.

Les modifications suivant l'axe Z, qui correspondent en fait à l'épaissseur de l'élément, ne sont pas visibles.

transform :

scale3d( 1, 1, 1 ) /* Pas de changement */

scale3d( 1.5, 1, 1 ) /* Équivalent à scaleX( 1.5 ) */

scale3d( 1, 1.5, 1 ) /* Équivalent à scaleY( 1.5 ) */

scale3d( 1, 1, 1.5 ) /* Équivalent à scaleZ( 1.5 ) */

scale3d( 1.5, 0.5, 1 ) /* Combinaison sur plusieurs axes */

scale3d( -1, 1, 1 ) /* Valeur négative */

scale3d( 50%, 50%, 100% ) /* Syntaxe avec pourcentages */

Résultat

Compatibilité et prise en charge des transformations 3D.

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

Colonne 1

Traitement des transformations dans le plan de l'écran (transformations 2D).

Colonne 2

Traitement des transformations pouvant sortir du plan de l'écran (transformations 3D).

Colonne 3

Prise en charge par les navigateurs des fonctions CSS scale(), scaleX(), scaleY() et scaleZ().

Colonne 3

Prise en charge par les navigateurs de la fonction CSS scale3d().

Transformations
2D

Transformations
3D

Fonction
scale()

Fonction
scale3d()

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 : 103

Baidu Browser

Version testée : 7.12

Chrome

Version testée : 103

Chrome pour Androïd

Version testée : 103

Edge

Version testée : 103

Firefox

Version testée : 103

Firefox pour Androïd

Version testée : 101

Internet Explorer

Version testée : 11

KaiOS Browser

Version testée : 2.5

Opéra

Version testée : 89

Opéra Mobile

Version testée : 64

QQ Browser

Version testée : 10.4

Safari

Version testée : 15.6

Safari sur IOS

Version testée : 15.5

Samsung Internet

Version testée : 17.0

UC Browser pour Androïd

Version testée : 12.12

Opéra mini

Version testée : Toutes

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

Caniuse

Historique de la fonction `scale()`.

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 :