Sintassi

Significato dei valori principali:

• translate(x, y): Sposta l’elemento lungo l’asse X e/o Y (es: translate(50px, 100px)).

• rotate(angle): Ruota l’elemento secondo l’angolo specificato (es: rotate(45deg)).

• scale(x, y): Ridimensiona l’elemento orizzontalmente e verticalmente (es: scale(1.5, 2)).

• skew(x-angle, y-angle): Inclina l’elemento sugli assi X e/o Y (es: skew(20deg, 10deg)).

• matrix(a, b, c, d, e, f): Applica una trasformazione complessa tramite una matrice 2D.

Esempio proprietà: transform

Codice Esempio: transform

CODE: CSS

1. .transform-example {

2.   width: 200px;

3.   height: 200px;

4.   background-color: #4078f2;

5.   color: white;

6.   font-size: 20px;

7.   display: flex;

8.   justify-content: center;

9.   align-items: center;

10.   border-radius: 10px;

11.   transform: rotate(15deg) scale(1.2);

12.   transition: transform 0.3s ease-in-out;

13. }

15. .transform-example:hover {

16.   transform: rotate(0deg) scale(1);

17. }

Contenuto Esempio: transform

  
  <style>
    .transform-example {
      width: 200px;
      height: 200px;
      background-color: #4078f2;
      color: white;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      transform: rotate(15deg) scale(1.2); /* Rotazione e scala */
      transition: transform 0.3s ease-in-out;
    }

    .transform-example:hover {
      transform: rotate(0deg) scale(1); /* Stato iniziale al passaggio del mouse */
    }
  </style>

  <div class="transform-example">
      Elemento trasformato
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser