Sintassi

Significato dei valori principali:

• fattore-sx, fattore-sy: i valori specificano di quanto ridimensionare l'elemento lungo gli assi X e Y. Un valore maggiore di 1 ingrandisce l'elemento, mentre un valore compreso tra 0 e 1 lo riduce. Se il valore di un asse non viene specificato, viene applicato il valore dell'altro asse anche a quest'ultimo.

• 1, 1: nessuna trasformazione, l'elemento resta nella sua dimensione originale.

• 2, 2: ingrandisce l'elemento del 200% sia sull'asse X che sull'asse Y.

• 0.5, 0.5: riduce l'elemento al 50% della sua dimensione originale sia sull'asse X che sull'asse Y.

Esempio proprietà: scale

Codice Esempio: scale

CODE: CSS

1. .scale-example {

2.   width: 150px;

3.   height: 150px;

4.   background-color: #50a14f;

5.   color: white;

6.   display: flex;

7.   justify-content: center;

8.   align-items: center;

9.   font-size: 20px;

10.   transition: transform 1s ease-in-out;

11. }

13. .scale-example:hover {

14.   transform: scale(1.5); /* Aumenta le dimensioni dell'elemento del 50% */

15. }

Contenuto Esempio: scale

  
  <style>
    .scale-example {
      width: 150px;
      height: 150px;
      background-color: #50a14f;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      transition: transform 0.3s ease;
    }

    .scale-example:hover {
      transform: scale(1.5); /* Ingrandisce l'elemento del 150% */
    }
  </style>

  <div class="scale-example">Scala!</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