Transform: translate, rotate, scale

La proprietà transform permette di modificare la forma e la posizione degli elementi.

translate (spostamento)

.move {
  transform: translateX(100px);  /* Sposta a destra */
  transform: translateY(-50px);  /* Sposta in alto */
  transform: translate(100px, 50px); /* X e Y */
}

rotate (rotazione)

.rotate {
  transform: rotate(45deg);   /* Senso orario */
  transform: rotate(-90deg);  /* Antiorario */
}

scale (ridimensionamento)

.grow {
  transform: scale(1.5);      /* 150% */
  transform: scaleX(2);       /* Doppia larghezza */
}

Combinare trasformazioni

.combined {
  transform: translate(50px, 0) rotate(45deg) scale(1.2);
}

Hai trovato utile quest'articolo?

  • Introduzione al CSS

    Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione ...
  • Selettori CSS di base

    I selettori CSS permettono di identificare gli elementi HTML a cui applicare gli stili.Tipi di selet...
  • Proprietà color e background

    Le proprietà color e background sono fondamentali per definire l'aspetto visivo degli elementi.Propr...
  • Margin e Padding

    Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chiaveMargin: spazio...
  • Box Model CSS

    Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un...