scale - Propriété CSS
Résumé des caractéristiques de la propriété scale
noneLes % sont interdits sur la valeur
z.nonescale passe progressivement d'une valeur à une autre.Schéma syntaxique de scale.
Les termes présents sur le schéma sont décrits ci-dessous :
numberest le coefficient d'agrandissement ou de réduction (nombre positif ou négatif, sans unité).
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
Xest l'axe horizontal. - L'axe
Yest l'axe vertical. Ces deux axes sont dans le plan de l'écran. - L'axe
Zest perpendiculaire au plan de l'écran, dirigé depuis l'écran vers l’œil du lecteur.
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;
Certains navigateurs comme Opéra reconnaissent une propriété nommée zoom qui est sensiblement équivalente à
scale. Néanmoins il est préférable d'utiliser scale qui est la propriété standardisée.
Syntaxes pour scale.
- scale: none;
Aucune mise à l'échelle n'est appliquée à l'élément.
- 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. - scale: 2 3;
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.
- scale: 2 0.5 2;
Lorsqu'une troisième valeur est spécifiée, elle s'applique à l'épaisseur de l'élément (axe
Z).Les changements de dimension suivant l'axe
Zsont invisibles car l'épaisseur de l'élément est initialement de zéro. Néanmoins, appliquer la valeur0à la troisième valeur fait disparaître l'élément, tout comme un0sur la première ou la deuxième valeur.D'autre part, si l'élément a été tourné avec
transform:rotateX(...)outransform:rotateY(...), le changement de dimension suivant l'axeZaura un effet visible. Ce ne sera pas le cas si l'élément a été tourné avec la propriétérotate. La valeur initiale est :
none
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.
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');
}
Simulateur.
Prise en charge par les navigateurs (compatibilité).
Les navigateurs reconnaissent bien maintenant la propriété scale.
La propriété transform avec la fonction scale() est une autre solution bien reconnue.
La syntaxe avec la propriété zoom est possible, mais n'étant pas standardisée, il est déconseillé de l'utiliser.
scale.
zoom, cependant reconnue par de nombreux navigateurs.
scalezoomNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que scale.
Les spécifications CSS éditées par le W3C sont organisées en modules. scale fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.