Summary  
This chapter explains how to apply 2D and 3D rotations to elements using transform functions—rotate(), rotateX(), and rotateY()—by specifying angles in degrees, radians, or turns around the x, y, and z axes.  

General domain of usage  
Web user interface animations and styling

È possibile utilizzare la funzione `rotate()` per ruotare gli elementi. I valori positivi ruotano l'elemento in senso orario, mentre i valori negativi lo ruotano in senso antiorario. L'angolo di rotazione è solitamente specificato in gradi (`deg`), con il valore predefinito di 0deg che indica nessuna rotazione. Altre unità accettabili per gli angoli di rotazione sono i turni (`turn`) e i radianti (`rad`).

### Assi dell'elemento
Per comprendere come funziona la rotazione, è necessario comprendere il concetto di assi dell'elemento. Esistono tre assi:
- L'asse x è orizzontale, va da sinistra a destra;
- L'asse y è verticale, va dall'alto verso il basso;
- L'asse z è perpendicolare allo schermo, puntando verso l'osservatore.

### Direzione della rotazione
Per impostazione predefinita, la proprietà `rotate()` ruota l'elemento attorno all'asse z. Tuttavia, è possibile applicare la rotazione anche attorno all'asse x e all'asse y utilizzando i seguenti valori:
```css
transform: rotateX(angle);
transform: rotateY(angle);
```

### Esempio 1
Considerare il seguente esempio di codice, in cui vengono applicati diversi angoli di rotazione per mostrare la rotazione attorno all'asse z:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+NDVkZWc8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4zNjBkZWc8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4tMjcwZGVnPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjOThkYmM2OwogIGFuaW1hdGlvbjogcm90YXRlMSA3MDAwbXMgaW5maW5pdGUgMTAwMG1zOwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2U2ZDcyYTsKICBhbmltYXRpb246IHJvdGF0ZTIgNzAwMG1zIGluZmluaXRlIDEwMDBtczsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtY29sb3I6ICNmMThkOWU7CiAgYW5pbWF0aW9uOiByb3RhdGUzIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCkBrZXlmcmFtZXMgcm90YXRlMSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQoKICA1MCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpOwogIH0KCiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwKTsKICB9Cn0KCkBrZXlmcmFtZXMgcm90YXRlMiB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQoKICA1MCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQp9CgpAa2V5ZnJhbWVzIHJvdGF0ZTMgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDApOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKC0yNzBkZWcpOwogIH0KCiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwKTsKICB9Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KCi5ib3ggewogIGZvbnQtc2l6ZTogMjJweDsKICBjb2xvcjogIzMyNDg1MTsKICB3aWR0aDogMTUwcHg7CiAgaGVpZ2h0OiAxNTBweDsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyLXJhZGl1czogMjBweDsKICBtYXJnaW46IDIwcHg7CiAgYm94LXNoYWRvdzogMHB4IDJweCAxcHggLTFweCByZ2JhKDAsIDAsIDAsIDAuMiksCiAgICAwcHggMXB4IDFweCAwcHggcmdiYSgwLCAwLCAwLCAwLjE0KSwgMHB4IDFweCAzcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xMik7Cn0=

### Esempio 2
In questo esempio, vengono esplorate le rotazioni attorno all'asse z, all'asse x e all'asse y:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+ei1heGlzPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+eS1heGlzPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+eC1heGlzPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjOThkYmM2OwogIGFuaW1hdGlvbjogcm90YXRlMSA3MDAwbXMgaW5maW5pdGUgMTAwMG1zOwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2U2ZDcyYTsKICBhbmltYXRpb246IHJvdGF0ZTIgNzAwMG1zIGluZmluaXRlIDEwMDBtczsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtY29sb3I6ICNmMThkOWU7CiAgYW5pbWF0aW9uOiByb3RhdGUzIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCkBrZXlmcmFtZXMgcm90YXRlMSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQoKICA1MCUgewogICAgdHJhbnNmb3JtOiByb3RhdGVaKDkwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQp9CgpAa2V5ZnJhbWVzIHJvdGF0ZTIgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDApOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlWSg5MGRlZyk7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDApOwogIH0KfQoKQGtleWZyYW1lcyByb3RhdGUzIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwKTsKICB9CgogIDUwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZVgoOTBkZWcpOwogIH0KCiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwKTsKICB9Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KCi5ib3ggewogIGZvbnQtc2l6ZTogMjJweDsKICBjb2xvcjogIzMyNDg1MTsKICB3aWR0aDogMTUwcHg7CiAgaGVpZ2h0OiAxNTBweDsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyLXJhZGl1czogMjBweDsKICBtYXJnaW46IDIwcHg7CiAgYm94LXNoYWRvdzogMHB4IDJweCAxcHggLTFweCByZ2JhKDAsIDAsIDAsIDAuMiksCiAgICAwcHggMXB4IDFweCAwcHggcmdiYSgwLCAwLCAwLCAwLjE0KSwgMHB4IDFweCAzcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xMik7Cn0=

Quali unità vengono utilizzate per specificare l'angolo di rotazione?

Migliora le tue competenze di styling padroneggiando tecniche CSS avanzate per il web design moderno. Posiziona e gestisci gli elementi con precisione utilizzando strategie di posizionamento avanzate. Crea transizioni fluide e animazioni coinvolgenti per migliorare l'esperienza utente. Trasforma e manipola gli elementi per effetti visivi dinamici. Realizza design responsivi che si adattano a diversi dispositivi e ottimizza il flusso di lavoro con preprocessori CSS come Sass.

Scopri cosa possono aspettarsi gli studenti da questo corso avanzato di HTML e CSS. Quali conoscenze sono necessarie prima di iniziare il corso? Quali argomenti verranno trattati?

Posizionamento e gestione degli elementi nelle pagine web. Approfondimento delle diverse proprietà di posizionamento, utilizzo dell'ordine di sovrapposizione per controllare la visibilità degli elementi sovrapposti e gestione dell'overflow dei contenuti.

Esplora il potenziale delle transizioni e apprendi come migliorare l'esperienza utente. Scopri come animare le proprietà in modo fluido e graduale, creando transizioni di stato senza soluzione di continuità.

Scopri la proprietà animation e come può essere utilizzata per creare design dinamici e coinvolgenti. Approfondisci la creazione di animazioni complesse utilizzando i keyframe e il controllo dell'animazione.

Esplora la proprietà di trasformazione, che consente di modificare l'aspetto e la posizione degli elementi in una pagina web. Scopri come ridimensionare, ruotare, inclinare e traslare elementi in due e tre dimensioni. Combina più trasformazioni per creare effetti più complessi.

I principi e le tecniche utilizzate nel design adattivo/responsive mirano a rendere siti web e applicazioni accessibili e visivamente attraenti su diversi dispositivi, dimensioni dello schermo e orientamenti.

Scopri i preprocessori in CSS e come possono aiutare a scrivere codice più efficiente e manutenibile. Comprendi come utilizzare i preprocessori per semplificare il flusso di lavoro e generare codice CSS più pulito.

Rotazione degli Elementi in 2D e 3D

Assi dell'elemento

Direzione della rotazione

Esempio 1

Esempio 2

Awesome!

Rotazione degli Elementi in 2D e 3D

Assi dell'elemento

Direzione della rotazione

Esempio 1

Esempio 2