scale
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis août 2022.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété scale permet de mise à l'échelle individuellement et indépendamment de la propriété transform. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour transform.
Syntaxe
/* Valeurs avec un mot-clé */ scale: none; /* Une seule valeur */ /* Les valeurs supérieures à 1 agrandissent l'élément */ scale: 2; /* Les valeurs inférieures à 1 rétrécissent l'élément */ scale: 0.5; /* Deux valeurs */ scale: 2 0.5; /* Trois valeurs */ scale: 2 0.5 2; Valeurs
- Une seule valeur de longueur/pourcentage
-
Une longueur ou un pourcentage qui définit une mise à l'échelle en deux dimensions. Le facteur utilisé est le même pour l'axe X et l'axe Y. Cela est équivalent à la fonction
scale()(mise à l'échelle sur deux dimensions) avec une seule valeur. - Deux valeurs de longueur/pourcentage
-
Deux longueurs ou pourcentages qui définissent respectivement les composantes horizontale et verticale de l'agrandissement/rétrécissement en deux dimensions. Cela est équivalent à la fonction
scale()appelée avec ces deux arguments. - Trois valeurs de longueur/pourcentage
-
Trois longueurs ou pourcentages qui définissent respectivement les composantes horizontale, verticale et en profondeur de la mise à l'échelle sur trois dimensions. Cela est équivalent à la fonction
scale3d()appelée avec ces trois arguments. none-
Cette valeur indique qu'aucune mise à l'échelle ne devrait être appliquée.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | éléments transformables |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | une transformation |
| Crée un contexte d'empilement | oui |
Syntaxe formelle
scale =
none |
[ <number> | <percentage> ]{1,3}
Exemples
HTML
<div> <p class="scale">Scaling</p> </div> CSS
* { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } Résultat
Spécifications
| Specification |
|---|
| CSS Transforms Module Level 2 # individual-transforms |