scale() CSS fonction

Définition de la CSS scale().

La fonction d'Echelle CSS scale() de la propriété de Transformation CSS transform permet d'agrandir l'échelle ou de réduire d'échelle d'un élément HTML.

Exemple de syntaxe CSS scale() :

transform : scale(2, 2); /* Agrandissement */
transform : scale(2); /* Agrandissement */
transform : scale(1, 1); /* Pas de changement d'échelle */
transform : scale(0.5, 0.5); /* Réduction */
transform : scale(0.5); /* Réduction */

La fonction d'Echelle CSS scale(X,Y) accepte comme arguments d'échelle :

X,Y : X est un nombre représentant le coefficient de dilatation de la longueur (width) et Y est un nombre représentant le coefficient de dilatation de la hauteur (height).
X : nombre seul représentant le coefficient de dilatation de pour la longueur (width) et la hauteur (height).
Si la valeur de X ou Y est égale à 1 c'est la taille d'origine.
Si la valeur de X ou Y est inférieure à 1, alors il y a une réduction d'échelle.
Si la valeur de X ou Y est supérieure à 1, alors il y a un agrandissement d'échelle.

Testez en direct le changement d'échelle avec la fonction scale() CSS.

Exemple de code scale() CSS

Conditions d'application de la CSS scale().

La fonction d'Echelle CSS scale() est applicable avec la propriété de Transformation CSS transform et avec ses propriétés de Transformation CSS préfixées (-moz-transform, -webkit-transform, -ms-transform).

La valeur de la CSS scale() peut être mise directement dans la fonction de raccourci CSS scale3d().

Problème d'interprétation de scale() en Css.

La propriété de Transformation CSS transform n'est reconnue par certains navigateurs.

Conditions d'animation de scale() en CSS3.

Mettez transform comme valeur de la propriété de Transformation CSS transition-property.

La CSS scale() est une fonction de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour scale().

Changer point d'origne du changement d'échelle

transform-origine pour scale Le point d'origine par défaut de l'agrandissement ou de la réduction correspond au centre de votre élément et prend pour axe de coordonnés son coin haut gauche.
Le point d'origine de l'agrandissement ou de la réduction peut être modifier avec la CSS transform-origin. Dans l'exemple ci-dessus, on effectue un changement d'échelle de 1.5 avec dans l'ordre :

transform-orign utilisé pour l'exemple :

transform-orign : center center;
transform-orign : 0 0;
transform-orign : 45px 45px;

Exemple d'agrandissement avec scale point d'origine center center

Equivalence avec la fonction de Transformation CSS matrix()

Utiliser la fonction d'Echelle CSS scale() revient utiliser la fonction de Matrice CSS matrix() ci-dessous :

Equivalence CSS scale/matrix :

transform : matrix(echelleX, 0, 0, echelleY, 0, 0);

Valeurs à remplacer :

echelleX : valeur du coefficient de grandissement ou de réduction horizontal.
echelleY : valeur du coefficient de grandissement ou de réduction vertical.

Compatibilités navigateurs de la fonction scale()

Détails des versions de la CSS scale(): Fonction scale() est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS scale(): Fonction CSS scale() est compatible à partir de Chrome 1; Fonction CSS scale() est compatible à partir de Firefox 3.5; Fonction CSS scale() est compatible à partir de Internet Explorer 9; Fonction CSS scale() est compatible à partir de Opera 10.5; Fonction CSS scale() est compatible à partir de Safari 3.1

Votre avis sur la définition scale() en CSS

Votez pour la définition CSS `scale()`

Votes: 4.4 / 5 - 24 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css scale()

Définitions CSS annexes scale()

-moz-transform: La propriété de Transformation CSS -MOZ-TRANSFORM permet de spécifier les transformations 2D et 3D à appliquer à un élément HTML.Exemple d'écriture CS...[ -moz-transform ]
-ms-transform: La propriété de Transformation CSS -MS-TRANSFORM permet de spécifier les transformations 2D à appliquer sur un élément HTML. Exemple d'écriture CSS de...[ -ms-transform ]
-webkit-transform: La propriété de Transformation CSS -WEBKIT-TRANSFORM permet de spécifier les transformations 2D ou 3D à appliquer à un élément HTML. Exemple d'écritur...[ -webkit-transform ]
height: La propriété de Hauteur CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS...[ height ]
matrix(): La fonction de Matrice CSS MATRIX() de la propriété de Transformation CSS transform permet d'incliner, changer l'échelle, faire une rotation, déplacer...[ matrix() ]
scale3d(): La fonction d'Echelle CSS scale3d() de la propriété de Transformation CSS transform permet d'agrandir l'échelle ou de réduire l'échelle d'un élément H...[ scale3d() ]
transform: La propriété de Transformation CSS TRANSFORM permet de spécifier le type de transformation 2d ou 3d à appliquer sur un élément HTML.Exemple d'écriture...[ transform ]
transform-origin: La propriété de Transformation CSS TRANSFORM-ORIGIN permet de spécifier le point d'origine des transformations 2d ou 3d lors de l'utilisation de la pr...[ transform-origin ]
transition-property: La propriété de Transition CSS TRANSITION-PROPERTY permet de spécifier les propriétés CSS qui doivent être transformées au moment du changement de leu...[ transition-property ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]