scale
Baseline
Large disponibilité
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.
La propriété CSS scale permet de définir des transformations de mise à l'échelle individuellement et indépendamment de la propriété transform. Cela correspond mieux à l'utilisation typique de l'interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformation à définir dans la valeur transform.
Exemple interactif
scale: none;
scale: 1.5;
scale: 1.7 50%;
scale: 1 -1;
scale: 1.2 1.2 2;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
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: 200% 50% 200%;
/* Valeurs globales */
scale: inherit;
scale: initial;
scale: revert;
scale: revert-layer;
scale: unset;
Valeurs
- Valeur simple
-
Un nombre (
<number>) ou un pourcentage (<percentage>) définissant un facteur d'échelle permettant de redimensionner l'élément concerné selon le même facteur sur les axes X et Y. Cela équivaut à la fonctionscale()(redimensionnement 2D) avec une seule valeur définie. - Deux valeurs
-
Deux nombres (
<number>) ou pourcentage (<percentage>) qui définissent respectivement les valeurs de mise à l'échelle des axes X et Y d'une mise à l'échelle 2D. Équivaut à une fonctionscale()(mise à l'échelle 2D) avec deux valeurs définies. - Trois valeurs
-
Trois nombres (
<number>) ou pourcentage (<percentage>) qui définissent respectivement les valeurs de mise à l'échelle des axes X, Y et Z d'une mise à l'échelle 3D. Équivaut à une fonctionscale3d()(mise à l'échelle 3D) avec trois valeurs définies. none-
Définit qu'aucun redimensionnement ne doit être appliqué.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | éléments transformables |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | une transformation |
| Crée un contexte d'empilement | oui |
Syntaxe formelle
scale =
none |
[ <number> | <percentage> ]{1,3}
Exemples
Redimensionner un élément au survol
L'exemple suivant montre comment redimensionner un élément au survol.
Deux boîtes sont affichées, l'une avec une seule valeur scale qui redimensionne l'élément sur les deux axes.
La deuxième boîte a deux valeurs scale qui redimensionnent l'élément sur les axes X et Y de manière indépendante.
HTML
<div class="box" id="box1">valeur unique</div>
<div class="box" id="box2">deux valeurs</div>
CSS
.box {
float: left;
margin: 1em;
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
scale: 1.25;
}
#box2:hover {
scale: 1.25 0.75;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Transforms Module Level 2 # individual-transforms |
Compatibilité des navigateurs
Voir aussi
Note : skew n'est pas une valeur de transformation indépendante