Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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)
Statut du document:: CR (document proposé pour 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 :
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().
1
2D transformations
2
3D transformations
3
scale()
4
scale3d()
Estimation de la prise en charge en pourcentage du parc actuel.
98%
97%
97%
97%

Navigateurs 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.

Propriétés.

Visibilité de la face arrière de l'élément (pendant sa rotation).
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
Définit une rotation de l'élément.
Définit un mise à l'échelle de l'élément (agrandissement ou réduction).
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
Définit la boîte de référence pour les transformations.
Point d'origine pour les transformations.
Rendu des éléments soumis à une transformation 3D.
Définit une translation de l'élément (un déplacement).
Définit un agrandissement ou une réduction de l'élément.

Fonctions.

Applique une transformation composite à un élément (translations, rotations...)
Applique une série de transformations 3D à un élément.
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
Définit une rotation de l'élément en 2D (dans le plan de l'écran).
Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D.
Définit une rotation de l'élément autour de l'axe X (en 3D),
Définit une rotation 3D de l'élément autour de l'axe Y.
Définit une rotation de l'élément autour de l'axe Z.
Définit une mise à l'échelle en 3D.
Définit une mise à l'échelle suivant l'axe X.
Définit une mise à l'échelle suivant l'axe Y.
Définit une mise à l'échelle suivant l'axe Z.
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
Définit une inclinaison de l'élément suivant l'axe X.
Définit une inclinaison de l'élément suivant l'axe Y.
Applique une translation (un déplacement ) à un élément.
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
Définit une translation suivant l'axe X (horizontalement).
Définit une translation suivant l'axe Y (verticalement).
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).