utoriel CSS : La propriété scale

Tutoriel CSS : La propriété scale

La propriété scale en CSS permet de modifier la taille d'un élément en appliquant une transformation d'échelle. Cela signifie qu'il est possible d'agrandir ou de réduire la taille d'un élément tout en conservant ses proportions d'origine.

Syntaxe générale de la propriété CSS scale

La syntaxe générale de la propriété scale est la suivante :

transform: scale(x);

où x est le facteur d'échelle qui détermine la taille relative de l'élément. Une valeur de 1 maintient la taille d'origine, tandis que des valeurs inférieures à 1 réduisent la taille et des valeurs supérieures à 1 agrandissent la taille.

Valeurs par défaut	none
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.scale="2 0.7"

Valeurs possibles de la propriété CSS scale

La propriété scale accepte les valeurs suivantes :

scale(x) : Définit l'échelle horizontale et verticale avec le facteur d'échelle x.
scaleX(x) : Définit l'échelle horizontale avec le facteur d'échelle x.
scaleY(x) : Définit l'échelle verticale avec le facteur d'échelle x.

Exemples pratiques d'utilisation de la propriété CSS scale

Considérons un élément avec une classe .my-element :

.my-element {
  width: 200px;
  height: 200px;
  background-color: #f00;
  transform: scale(1.5);
}

Dans cet exemple, nous appliquons une échelle de 1.5 à l'élément, ce qui le rendra 1,5 fois plus grand que sa taille d'origine. Cela signifie que la largeur et la hauteur de l'élément seront multipliées par 1.5.

Il est également possible d'appliquer des échelles différentes horizontalement et verticalement en utilisant les valeurs scaleX et scaleY. Par exemple :

.my-element {
  width: 200px;
  height: 200px;
  background-color: #f00;
  transform: scaleX(1.2) scaleY(0.8);
}

Dans cet exemple, nous appliquons une échelle horizontale de 1.2 et une échelle verticale de 0.8 à l'élément. Cela signifie que la largeur de l'élément sera augmentée de 20% tandis que la hauteur sera réduite de 20% par rapport à leur taille d'origine.

Astuces et conseils d'utilisation de la propriété CSS scale

Voici quelques astuces et conseils pour utiliser la propriété scale :

Utilisez des valeurs décimales pour des ajustements plus précis. Par exemple, scale(1.2) agrandit de 20%, scale(0.8) réduit de 20%.
La propriété scale s'applique non seulement aux dimensions de l'élément, mais également à tous les autres éléments enfants.
Vous pouvez combiner la propriété scale avec d'autres transformations CSS telles que rotate ou translate pour créer des effets intéressants.
Utilisez les transitions CSS pour animer en douceur les changements d'échelle.
Veillez à tester l'aspect de l'élément à différentes tailles d'écran, car une échelle fixe peut entraîner des problèmes de mise en page sur des appareils plus petits.

Avec la propriété scale en CSS, vous pouvez facilement agrandir ou réduire la taille des éléments de votre page tout en conservant leurs proportions d'origine. Expérimentez avec différentes valeurs d'échelle et combinez-les avec d'autres transformations pour créer des effets visuels uniques.

Exemple : utilisation de la propriété CSS scale avec javascript

Ce code HTML et JavaScript présente un exemple d'utilisation de la propriété CSS scale. L'objectif est de permettre à l'utilisateur de contrôler la mise à l'échelle d'une boîte à l'aide de deux curseurs.

Exemple : Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété scale css</title> 
<style>
html, body{
  height:100vh;
  width:100%;
  background: #00136c;
  color:#fff;
  font-family: system-ui;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.conteneur{
  width: 100px;
  height: 100px;
  border:4px solid #fff;
}

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  color:#000;
  display: flex;
  justify-content:center;
  align-items:center;
  font-weight: bold;
/*   transform:scale(1,2); */
}

.second-conteneur{
  margin-top:50px;
}

input {
  width: 200px;
}

.code-conteneur {
  margin-top:50px;
  display:inline-block;
  padding:15px;
  text-align: center;
  background-color: #272822;
  border-radius: 3px;
  color: #F8F8F2;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
}

.token-function {
  color: #E6DB74;
  width: 40px;
 
}
</style>
</head>
<body>

<h1>La propriété css scale</h1> <br>
<div class="conteneur">
  <div class="box">
    Bonjour tout le monde
  </div>
</div>

<div class="second-conteneur">
  <table> 
  <tr><th><span>ScaleX</span></th><th>
   <span>scaleY</span></th></tr>
    <tr><td><input class="xdirection" type="range" min="0" max="2" step="0.1" value="1"></td><td>
    <input class="ydirection" type="range" min="0" max="2" step="0.1" value="1"></td></tr>
  </table>

  <output class="code-conteneur">scale: <span class="token-function">1 1;</span> </output>
</div>
<script>
var box = document.querySelector('.box'),
    sliderX = document.querySelector('.xdirection'),
    sliderY = document.querySelector('.ydirection'),
    Xvalue = 1,
    Yvalue = 1,
    ans = `${Xvalue} ${Yvalue}`;

sliderX.addEventListener('input', function () {
  Xvalue = this.value;
  ans = `${Xvalue} ${Yvalue}`;
  ansX=`${Xvalue}`;
  box.style.scale = ans;
  document.querySelector('.token-function').textContent = ans;
  document.querySelector('.x').textContent =ansX ; 
}, false);

sliderY.addEventListener('input', function () {
  Yvalue = this.value;
  ans = `${Xvalue} ${Yvalue}`;
  ansY=`${Yvalue}`;
  box.style.scale = ans;
  document.querySelector('.token-function').textContent = ans;
  document.querySelector('.y').textContent =ansY ;
}, false);
</script>
</body>
</html>

Ce code permet à l'utilisateur de contrôler la mise à l'échelle d'une boîte en utilisant deux curseurs, et affiche les valeurs de mise à l'échelle actuelles.