Sintassi

Significato dei valori principali:

• x-axis: Definisce la posizione orizzontale dell'origine della trasformazione. Valori comuni: left, center, right, oppure lunghezze/percentuali (es: 25%, 50px).

• y-axis: Definisce la posizione verticale dell’origine. Valori comuni: top, center, bottom, oppure lunghezze/percentuali.

• z-axis (opzionale): Utilizzato solo per trasformazioni 3D per definire la profondità (es: 50px).

Esempio proprietà: transform-origin

Codice Esempio: transform-origin

CODE: CSS

1. .origin-example {

2.   width: 200px;

3.   height: 200px;

4.   background-color: #e06c75;

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(45deg);

12.   transform-origin: top left;

13.   transition: transform 0.5s ease;

14. }

16. .origin-example:hover {

17.   transform: rotate(0deg);

18. }

Contenuto Esempio: transform-origin

  
  <style>
    .origin-example {
      width: 200px;
      height: 200px;
      background-color: #e06c75;
      color: white;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      transform: rotate(45deg);
      transform-origin: top left;
      transition: transform 0.5s ease;
    }

    .origin-example:hover {
      transform: rotate(0deg);
    }
  </style>

  <div class="origin-example">
      Origine: top left
  </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