scale
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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 |
Compatibilité des navigateurs
Loading…