Summary  
This chapter explains how to apply CSS transform skew functions (skew, skewX, skewY) to deviate an element’s shape along the x- or y-axis by specified degree angles.

General domain of usage  
Front-end web design

`skew()` consente di deviare i lati di un elemento rispetto agli assi cartesiani di un angolo specifico. L'angolo deve essere indicato in gradi (`deg`). È inoltre possibile determinare la distorsione solo per l'asse x o l'asse y. La sintassi è la seguente:
```css
transform: skew(X_angle, Y_angle);
transform: skewX(angle);
transform: skewY(angle);
```
- `skew()` accetta 2 valori. Il valore `X_angle` specifica l'angolo di inclinazione per l'asse x. Il valore `Y_angle` specifica l'angolo di inclinazione per l'asse y. Se non viene impostato il secondo valore (`Y_angle`), il browser lo interpreta come `skewX()`;
- `skewX(angle)` specifica la distorsione lungo l'asse x;
- `skewY(angle)` specifica la distorsione lungo l'asse y.

Eseguiamo il seguente esempio per osservare i risultati ottenibili tramite la distorsione:


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+c2tldygyMGRlZywgLTMwZGVnKTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPnNrZXdYKC02MGRlZyk8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij5za2V3WSg2MGRlZyk8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjOThkYmM2OwogIGFuaW1hdGlvbjogcm90YXRlMSA3MDAwbXMgaW5maW5pdGUgMTAwMG1zOwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2U2ZDcyYTsKICBhbmltYXRpb246IHJvdGF0ZTIgNzAwMG1zIGluZmluaXRlIDEwMDBtczsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtY29sb3I6ICNmMThkOWU7CiAgYW5pbWF0aW9uOiByb3RhdGUzIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCkBrZXlmcmFtZXMgcm90YXRlMSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiBza2V3KDAsIDApOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2tldygyMGRlZywgLTMwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiBza2V3KDAsIDApOwogIH0KfQoKQGtleWZyYW1lcyByb3RhdGUyIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHNrZXdYKDApOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2tld1goLTYwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiBza2V3WCgwKTsKICB9Cn0KCkBrZXlmcmFtZXMgcm90YXRlMyB7CiAgMCUgewogICAgdHJhbnNmb3JtOiBza2V3WSgwKTsKICB9CgogIDUwJSB7CiAgICB0cmFuc2Zvcm06IHNrZXdZKDYwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiBza2V3WSgwKTsKICB9Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KCi5ib3ggewogIGZvbnQtc2l6ZTogMjJweDsKICBjb2xvcjogIzMyNDg1MTsKICBmbGV4LWJhc2lzOiBjYWxjKDEwMCUgLyAzIC0gMTBweCk7CiAgaGVpZ2h0OiAxNTBweDsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyLXJhZGl1czogMjBweDsKICBtYXJnaW46IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDJweCAxcHggLTFweCByZ2JhKDAsIDAsIDAsIDAuMiksCiAgICAwcHggMXB4IDFweCAwcHggcmdiYSgwLCAwLCAwLCAwLjE0KSwgMHB4IDFweCAzcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xMik7Cn0=

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.

Inclinazione degli Elementi per Design Unici

Awesome!

Inclinazione degli Elementi per Design Unici