Esercizi Transform CSS

Codegrind Team•Jul 16 2023

Sperimenta la magia delle trasformazioni CSS con questi esercizi. Pratica l’uso delle trasformazioni 2D e 3D per ruotare, scalare, inclinare e traslare gli elementi HTML, aggiungendo dinamicità e vivacità al tuo design.

Esercizio 1

Crea una pagina HTML con un elemento `div` che abbia un testo all'interno. Applica una trasformazione CSS al div in modo che sia ruotato di 45 gradi.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      .rotate {
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="rotate">Testo ruotato di 45 gradi.</div>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un elemento `div` che abbia un'immagine all'interno. Applica una trasformazione CSS al div in modo che l'immagine sia scalata al doppio delle sue dimensioni originali.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      .scale {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div class="scale">
      <img
        src="path_to_image.jpg"
        alt="Immagine scalata al doppio delle dimensioni originali" />
    </div>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un elemento `div` di dimensioni 200x200 pixel e di colore rosso. Applica una trasformazione CSS al div in modo che sia traslato di 50 pixel in orizzontale e 30 pixel in verticale.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      .translate {
        width: 200px;
        height: 200px;
        background-color: red;
        transform: translate(50px, 30px);
      }
    </style>
  </head>
  <body>
    <div class="translate"></div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con un elemento di dimensioni 150x150 pixel e di colore blu. Applica una trasformazione CSS al div in modo che sia scalato orizzontalmente al 150% e verticalmente al 80%.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      .scale-xy {
        width: 150px;
        height: 150px;
        background-color: blue;
        transform: scale(1.5, 0.8);
      }
    </style>
  </head>
  <body>
    <div class="scale-xy"></div>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un elemento `div` di dimensioni 200x100 pixel e di colore verde. Applica una trasformazione CSS al div in modo che sia inclinato di 20 gradi verso destra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      .skew {
        width: 200px;
        height: 100px;
        background-color: green;
        transform: skewX(20deg);
      }
    </style>
  </head>
  <body>
    <div class="skew"></div>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un elemento `div` di dimensioni 150x150 pixel e di colore giallo. Applica una trasformazione CSS al div in modo che sia inclinato di 30 gradi verso sinistra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      .skew-left {
        width: 150px;
        height: 150px;
        background-color: yellow;
        transform: skewY(30deg);
      }
    </style>
  </head>
  <body>
    <div class="skew-left"></div>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un elemento di dimensioni 200x200 pixel e di colore magenta. Applica una trasformazione CSS al div in modo che sia ruotato di 60 gradi e scalato al 150% delle dimensioni originali.

Esercizio 8

Crea una pagina HTML con un elemento di dimensioni 100x100 pixel e di colore ciano. Applica una trasformazione CSS al div in modo che sia ruotato di 45 gradi e inclinato di 20 gradi verso destra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      .rotate-skew {
        width: 100px;
        height: 100px;
        background-color: cyan;
        transform: rotate(45deg) skewX(20deg);
      }
    </style>
  </head>
  <body>
    <div class="rotate-skew"></div>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un elemento di dimensioni 150x100 pixel e di colore arancione. Applica una trasformazione CSS al div in modo che sia scalato di 120% verticalmente e inclinato di 15 gradi verso sinistra.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      .scale-skew-left {
        width: 150px;
        height: 100px;
        background-color: orange;
        transform: scaleY(1.2) skewY(15deg);
      }
    </style>
  </head>
  <body>
    <div class="scale-skew-left"></div>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un elemento `div` di dimensioni 200x150 pixel e di colore viola. Applica una trasformazione CSS al div in modo che sia traslato di 30 pixel in orizzontale, 50 pixel in verticale, inclinato di 25 gradi verso destra e scalato al 120% delle dimensioni originali.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      .translate-rotate-scale {
        width: 200px;
        height: 150px;
        background-color: purple;
        transform: translate(30px, 50px) rotate(25deg) scale(1.2);
      }
    </style>
  </head>
  <body>
    <div class="translate-rotate-scale"></div>
  </body>
</html>