Propriété scale de CSS

Page précédente row-gap
Page suivante @scope

Définition et utilisation

scale L'attribut vous permet de changer la taille de l'élément.

scale L'attribut définit les valeurs de proportion de zoom sur les axes x et y de l'élément. Vous pouvez également définir la proportion de zoom sur l'axe z.

Les valeurs de zoom peuvent être une valeur, deux valeurs ou trois valeurs.

Si une valeur est fournie, la proportion de zoom sur les axes x et y est la même.
Si deux valeurs sont fournies, l'élément est redimensionné sur les axes x et y aux proportions spécifiées.
Si trois valeurs sont fournies, l'élément est redimensionné sur les axes x, y et z aux proportions spécifiées.

Pour mieux comprendre scale Pour voir les attributs, veuillez consulterDémo.

Attention :Une autre technique pour redimensionner un élément est d'utiliser les attributs avec Fonction scale() CSS l'attribut CSS transform. Les CSS expliqués sur cette page scale L'attribut peut dire qu'il s'agit d'une manière plus simple et plus directe de redimensionner un élément. Il est expliqué sur la page de

Exemple

Exemple 1

Changer la taille de l'élément :

div {
  scale: 2;
}

Essayez-le vous-même

Exemple 2

Lorsque scale Lorsque l'attribut est défini par deux valeurs, il définit la taille sur les axes x et y respectivement. Ici, la taille de l'élément est doublée sur l'axe x et réduite à la moitié sur l'axe y :

div {
  scale: 2 50%;
}

Essayez-le vous-même

Syntaxe CSS

scale: x-axis y-axis z-axis|initial|inherit;

Valeur de l'attribut

Valeur	Description
x-axis	Définit la proportion de zoom sur l'axe x. Les valeurs possibles sont : Numéro Pourcentage
y-axis	Définit la proportion de zoom sur l'axe y. Les valeurs possibles sont : Numéro Pourcentage
z-axis	Définit la proportion de zoom sur l'axe z. Les valeurs possibles sont : Numéro Pourcentage
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Détails techniques

Valeur par défaut :	none
Héritabilité :	Non
Réalisation des animations :	Pris en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.scale="2 0.7"