Fonction scale
La fonction scale met à l'échelle un élément :
elle l'agrandit ou le réduit plusieurs
fois. La mise à l'échelle s'effectue autour
du point défini par la propriété transform-origin.
Peut prendre un ou deux paramètres, énumérés par des virgules. S'il y a deux paramètres - le premier paramètre définit la mise à l'échelle horizontale, et le second - la verticale. S'il n'y a qu'un paramètre, alors il définit la mise à l'échelle horizontale et verticale simultanément.
La valeur des paramètres est un nombre entier ou fractionnaire.
S'il est supérieur à 1 - l'élément est agrandi,
s'il est inférieur (par exemple, 0.5) - l'élément
est réduit. Si on définit 1 - rien ne change
(c'est la valeur par défaut).
Syntaxe
sélecteur {
transform: scale(un ou deux nombres);
}
Exemple
Au survol du bloc, augmentons l'échelle de 1.5
fois sur les deux axes :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Exemple
Réduisons l'échelle de 2 fois sur les deux axes :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Exemple
Augmentons l'échelle de 2 fois sur l'axe X :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Exemple
Augmentons l'échelle de 2 fois sur l'axe Y :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
