Mise à l'Échelle
scale() nous permet d'augmenter ou de diminuer la taille de l'élément. De plus, nous pouvons redimensionner un élément uniquement verticalement en utilisant la propriété scaleY() ou uniquement horizontalement en utilisant la propriété scaleX().
transform: scale(X-value, Y-value);transform: scaleX(value);transform: scaleY(value);
Les valeurs pour les fonctions scale doivent être sans unité. Par défaut, la valeur est 1, ce qui signifie ne faire aucun changement.
- La fonction
scale()peut recevoir deux valeurs. La première (X-value) est le nombre représentant le redimensionnement horizontal. La seconde (Y-value) est le nombre représentant le redimensionnement vertical. Si nous définissons une seule valeur, le navigateur applique la même pour les échelles horizontale et verticale; - Les fonctions
scaleXetscaleYreçoivent une valeur et modifient un élément horizontalement et verticalement, respectivement.
Passons à la pratique et ajoutons un redimensionnement pour les éléments suivants :
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="box">scale(1.5, 1.5)</div>
<div class="box">scaleX(0.2)</div>
<div class="box">scaleY(1.5)</div>
</div>
</body>
</html>
/* This chapter focus */
.box:nth-child(1) {
background-color: #98dbc6;
animation: scale1 7000ms infinite 1000ms;
}
.box:nth-child(2) {
background-color: #e6d72a;
animation: scale2 7000ms infinite 1000ms;
}
.box:nth-child(3) {
background-color: #f18d9e;
animation: scale3 7000ms infinite 1000ms;
}
@keyframes scale1 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1);
}
}
@keyframes scale2 {
0% {
transform: scaleX(1);
}
50% {
Tout était clair ?
Merci pour vos commentaires !
Section 5. Chapitre 2
