`Scale` - Propriété CSS

scale

Résumé des caractéristiques de la propriété `scale`

Description rapide

Définit une mise à l'échelle de l'élément (agrandissement ou réduction).

Statut

Standard

S'applique à

Éléments transformables

Utilisable sur

HTML, SVG

Valeurs prédéfinies

none

Pourcentages

Calculés par rapport à la dimension correspondante de l'élément.
Les % sont interdits sur la valeur z.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété scale passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Transformations

Références (W3C)

CSS Transforms Module Level 2

Statut du document: WD (document de travail)

Schéma syntaxique de `scale`.

Schéma syntaxique de la propriété scale.
Syntaxe détaillée

Les termes présents sur le schéma sont décrits ci-dessous :

number est le coefficient d'agrandissement ou de réduction (nombre positif ou négatif, sans unité).
§ est un pourcentage.
La syntaxe peut être répétée de une à 3 fois.

Description de la propriété `scale`.

La propriété scale définit une transformation de l'élément (au sens CSS), à savoir sa mise à l'échelle, c'est à dire son agrandissement ou sa réduction. Le redimensionnement est appliqué également à tous les enfants de l'élément.

Comme toutes les transformations, l'effet de scale n'interagit pas avec la mise en page : même si l'élément s'agrandit ou se rétrécit, tout ce qui est situé après ne sera pas déplacé. On peut donc se retrouver dans le cas de figure où plusieurs éléments se chevauchent.

scale attend trois valeurs, qui correspondent aux coefficients d'agrandissement ou de réduction suivant les axes X, Y et Z. Ceux-ci étant définis de la façon suivante :

L'axe X est l'axe horizontal.
L'axe Y est l'axe vertical. Ces deux axes sont dans le plan de l'écran.
L'axe Z est perpendiculaire au plan de l'écran, dirigé depuis l'écran vers l’œil du lecteur.

Les axes X, Y et Z utilisés par la propriété scale

Conformément aux règles habituelles du CSS, les effets de plusieurs propriétés scale successives appliquées au même sélecteur, ne se cumulent pas. Ainsi le code ci-dessous laisse l'élément avec des dimensions réduites de moitié : la première règle est remplacée par la seconde, et est ignorée.


	scale: 2;
	scale: 0.5;

Valeurs pour `scale`.

scale: none;

Aucune mise à l'échelle n'est appliquée à l'élément.

Échantillon
scale: 2;

Si une seule valeur unique est spécifiée, la largeur et la hauteur de l'élément sont multipliées par ce coefficient.

Il s'agit d'un nombre sans unité. Les pourcentages peuvent être utilisés, et sont calculés par rapport aux dimensions initiales de l'élément : 200% correspond à un doublement de la taille de l'élément.

Échantillon
scale: 3 1.5;

Lorsque deux nombres sont spécifiés, ils correspondent respectivement aux coefficients à appliquer à la largeur de l'élément (axe x) et à la hauteur de l'élément (axe y). La dimension suivant l'axe z n'est pas modifiée.

Échantillon
scale: 2 0.75 2;

Lorsqu'une troisième valeur est spécifiée, elle s'applique à l'épaisseur de l'élément (axe Z).
Les pourcentages sont interdits pour l'axe Z.

Les changements de dimension suivant l'axe Z sont invisibles car l'épaisseur de l'élément est initialement de zéro. Néanmoins, appliquer la valeur 0 à la troisième valeur fait disparaître l'élément, tout comme un 0 sur la première ou la deuxième valeur.

D'autre part, si l'élément a été tourné avec transform:rotateX(...) ou transform:rotateY(...), le changement de dimension suivant l'axe Z aura un effet visible. Ce ne sera pas le cas si l'élément a été tourné avec la propriété rotate.

Échantillon
scale: initial; (none) scale: inherit; scale: revert; scale: revertLayer; scale: 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é `scale`.

Comme on peut s'y attendre, l'animation de scale peut très facilement donner des effets visuels intéressants.

Démonstration

Manipulation de la propriété `scale` par programme.

Dans les exemples de code ci-après, le paramètre el représente l'élément de la page sur lequel on souhaite appliquer une mise à l'échelle.

En Javascript, voici comment modifier la valeur de scale. Javascript propose une syntaxe avec une notation du type tableau, avec des crochets, et une autre syntaxe plus proche de la notation objet habituelle.


function setScale(el) {
   el.style['scale']='1 2 1';
}


function setScale(el) {
   el.style.scale='1 2 1';
}

Pour lire la valeur CSS de scale Javascript accepte également deux syntaxes. Ces codes renvoient la valeur de la propriété affectée directement à l'élément, et non pas par l'intermédiaire d'une classe ou d'un autre sélecteur. La valeur renvoyée peut être soit le mot none, soit les nombres affectés à la propriété (de 1 à 3), les pourcentages étant remplacés par la valeur numérique correspondante.


function getScale(el) {
   return el.style['scale'];
}


function getScale(el) {
   return el.style.scale;
}

Pour lire, en Javascript, la valeur calculée de scale, utilisez le code ci-dessous.


function getScale(el) {
   return window.getComputedStyle(el).getPropertyValue('scale');
}

Avec JQuery, voici des exemples de code pour modifier la valeur ou relire la valeur calculée de la propriété scale.


function setScale(el) {
   $(el).css('scale','1 2 1');
}


function getScale(el) {
   return $(el).css('scale');
}

Testez vous-même.

Les boutons ci-dessous appliquent la valeur à la propriété scale et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de scale. On constate en particulier que les pourcentages sont sont ramenés à des coefficients et que la valeur de Z, si elle veut 1, n'est pas mémorisée.

Simulateur avec la propriété `scale`.

scale :

none

Résultat

Prise en charge de `scale` par les navigateurs.

Les navigateurs reconnaissent bien maintenant la propriété scale. La propriété transform avec la fonction scale() est une autre solution bien reconnue.

Colonne 1

Prise en charge générale des transformation 2D, incluant les rotations, les translations d'éléments, etc.

Colonne 2

Prise en charge générale des animations en 3D, incluant le support pour la gestion de la perspective et le support pour la propriété backface-visibility.

Colonne 3

Support de la propriété scale qui définit des coefficients d'agrandissement ou de réduction pour l'élément.

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.

Transformations
2D

Transformations
3D

Propriété
scale

Estimation de la prise en charge globale.

97%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

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

Historique de la propriété `scale`.

Module CSS - Transformations - Niveau 2

Ajout de la propriété scale en complément de la propriété transform et de la fonction scale().

03 Mars 2020
Document de travail.

Voir aussi, concernant les transformations.

Le module "Module CSS - Transformations" (ou CSS Transforms Module en anglais) regroupe toutes les définitions concernant les transformations en CSS :