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 :

CSS - Fonction scale()

Description de la fonction scale().

La fonction scale() définit un changement de taille de l'élément (agrandissement ou réduction). Cette opération se fait sur la largeur et/ou la hauteur de l'élément ; pour une mise à l'échelle suivant l'axe Z, voir la fonction scale3d().

La propriété transform-origin définit l'origine de la mise à l'échelle, c'est à dire le point qui ne change pas d'emplacement. Par défaut ce point est le milieu de l'élément.

La fonction scale() peut être utilisée avec :

  • transform : Applique une transformation géométrique.

Syntaxe de la fonction scale().

  • transform: scale(5px 15px); x y

    x et y sont les coefficients à utiliser pour changer la taille de l'élément. x s'applique à la largeur et y à la hauteur.

    Ce sont deux nombres sans unité inférieurs à 1 (réduction de la dimension) ou supérieurs (agrandissement).

    Les valeurs négatives sont acceptées et provoquent un retournement de l'élément (symétrie).

    Si une seule des deux valeurs est précisée, elle s'applique aussi bien à la largeur qu'à la hauteur de l'élément. S'il s'agit d'une image, elle ne risque donc pas d'être déformée.

Simulateur.

transform:
( x y )
Résultat

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs prennent correctement en charge les transformations 2D.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Transformations géométriques - Propriétés.

  • backface-visibility : Visibilité de la face arrière de l'élément (pendant sa rotation).
  • perspective : Effet de perspective appliqué à un élément ayant subi une transformation 3D.
  • perspective-origin : Position de l'observateur dans le cas d'une déformation 3D avec perspective.
  • transform : Applique une transformation géométrique.
  • transform-origin : Point d'origine pour certaines transformations.
  • transform-style : Rendu des éléments soumis à une transformation 3D.

Transformations géométriques - Fonctions.

  • matrix() : Applique une transformation composite à un élément (translations, rotations...)
  • matrix3d() : Applique une série de transformations 3D à un élément.
  • perspective() : Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
  • rotate() : Définit une rotation de l'élément en 2D (dans le plan de l'écran).
  • rotate3d() : Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D.
  • rotateX() : Définit une rotation de l'élément autour de l'axe X (en 3D),
  • rotateY() : Définit une rotation 3D de l'élément autour de l'axe Y.
  • rotateZ() : Définit une rotation de l'élément autour de l'axe Z.