27 - La propriété transform

Comme son nom l'indique, cette propriété va pouvoir "transformer" un élément selon une fonction bien définie.

La fonction peut être l'une des suivantes :

rotate(angle) : fait tourner l'élément autour de son point central selon l'angle spécifié en degrés.
scale(x,y) : met à l'échelle l'élément selon les valeurs spécifiées pour l'axe x et y.
translate(x,y) : déplace l'élément de la distance spécifiée pour l'axe x et y.
skew(x-angle, y-angle) : incline l'élément selon les angles spécifiés pour l'axe x et y.

div:hover{
	transform: rotate(45deg); /* transform: [fonction]([valeur]); */
}

Cumulé à un effet de transition (voir chapitre suivant), cela vous permet d'affecter un élément sans faire bouger l'ensemble de votre layout. En effet, contrairement à des modifications de hauteur, margins, ou même via left, top, right, bottom d'une position absolute, transform va simplement "transfomer" les éléments sans en faire bouger d'autres.

Sachez également qu'il est possible de cumuler des transformations

div:hover{
	transform: rotate(45deg) scale(1.5);
}

Exemples

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transformations</title>
    <style>
      .shape {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 200px;
        height: 200px;
        background-color: #4caf50;
        color: white;
        font-weight: bold;
        font-size: 2rem;
        transition: all 3s;
      }
      .shape span {
        transition: all 3s;
      }
      .shape:hover {
        background-color: #f44336;
      }

      .rotated:hover {
        transform: rotate(35deg);
      }
      .rotated-without-text:hover {
        transform: rotate(35deg);
      }
      .rotated-without-text:hover span {
        transform: rotate(-35deg);
      }
      .translated:hover {
        transform: translate(-50px, 0px);
      }

      .translated-and-rotated:hover {
        transform: rotate(35deg) translate(-50px, 0px);
      }

      .rotated:hover + .translated {
        background: yellow;
        transform: translateX(-50px);
      }

      .scaled-up:hover {
        transform: scale(1.5);
      }
      .scaled-down:hover {
        transform: scale(0.5, 0.2);
      }
      /*  
        Détails de mise en page

        */
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
      }

      .container {
        display: flex;
        gap: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="shape rotated">Rotation</div>
      <div class="shape translated">Translation</div>
      <div class="shape translated-and-rotated">Translation & Rotated</div>
      <div class="shape scaled-up">Scaled (up)</div>
      <div class="shape scaled-down">Scaled (down)</div>
      <div class="shape rotated-without-text">
        <span>Rotation without text</span>
      </div>
    </div>
  </body>
</html>