## Compito
Creare una scheda informativa interattiva sugli animali. Seguire questi passaggi per aggiungere effetti dinamici al passaggio del mouse:
1. Applicare una `perspective` di `400px` all'elemento genitore, un `div` con il nome classe `container`.
2. Utilizzare la funzione `translateZ()` per avvicinare la scheda (`div` con il nome classe `card`) all'utente di `50px`.
3. Introdurre una distorsione lungo l'asse x di `10deg` alla descrizione della scheda (`div` con il nome classe `card-description-wrapper`).

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL3RyYW5zZm9ybWF0aW9ucytzZWN0aW9uL2hpcHBvLWNoYWxsZW5nZStpbWFnZS5wbmciCiAgICAgICAgICBhbHQ9ImhpcHBvIgogICAgICAgICAgd2lkdGg9IjEwMHB4IgogICAgICAgIC8+CiAgICAgICAgPGRpdiBjbGFzcz0iY2FyZC1kZXNjcmlwdGlvbi13cmFwcGVyIj4KICAgICAgICAgIDxoMyBjbGFzcz0iY2FyZC10aXRsZSI+SGlwcG88L2gzPgogICAgICAgICAgPHAgY2xhc3M9ImNhcmQtdGV4dCI+CiAgICAgICAgICAgIExhcmdlIHNlbWktYXF1YXRpYyBtYW1tYWwgd2l0aCB0aGljayBza2luLCBtYXNzaXZlIGphd3MsIGFuZCBzaG9ydAogICAgICAgICAgICBsZWdzLCBmb3VuZCBpbiBzdWItU2FoYXJhbiBBZnJpY2EuCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

OnJvb3QgewogIC0tdGltZTogNDAwMG1zOwogIC0tdGltZS1mdW5jdGlvbjogY3ViaWMtYmV6aWVyKDAuMTY1LCAwLjg0LCAwLjQ0LCAxKTsKfQoKLmNvbnRhaW5lciB7CiAgYm94LXNoYWRvdzogMHB4IDBweCA1cHggcmdiYSgwLCAwLCAwLCAwLjUpOwogIHBhZGRpbmc6IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKCiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCiAgX19fOiBfX187CiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBhYm92ZSB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCn0KCi5jYXJkOmhvdmVyIHsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICBfX186IF9fXzsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKLmNhcmQ6aG92ZXIgLmNhcmQtZGVzY3JpcHRpb24td3JhcHBlciB7CiAgYm94LXNoYWRvdzogMHB4IDBweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC41KTsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjZmMWYxOwoKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICBfX186IF9fXzsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCmgzLApwIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7Cn0KCi5jYXJkIHsKICBtYXJnaW46IDAgYXV0bzsKICB3aWR0aDogNDAwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICBwYWRkaW5nOiAxMHB4OwogIGJveC1zaGFkb3c6IDBweCAwcHggMTBweCByZ2JhKDAsIDAsIDAsIDAuNSk7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IHRyYW5zZm9ybTsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiB2YXIoLS10aW1lKTsKICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogdmFyKC0tdGltZS1mdW5jdGlvbik7Cn0KCi5jYXJkLWRlc2NyaXB0aW9uLXdyYXBwZXIgewogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIHBhZGRpbmc6IDEwcHggMDsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBhbGw7CiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogdmFyKC0tdGltZSk7CiAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IHZhcigtLXRpbWUtZnVuY3Rpb24pOwp9CgouY2FyZC10aXRsZSB7CiAgZm9udC1zaXplOiAxNHB4OwogIGNvbG9yOiAjMTQ2Yzk0Owp9CgouY2FyZC10ZXh0IHsKICBmb250LXNpemU6IDEycHg7CiAgbWFyZ2luLXRvcDogNXB4OwogIGNvbG9yOiAjMTlhN2NlOwp9

1. Per il contenitore principale (`container` con il nome classe `perspective`), impostare la proprietà `400px` a `div` per creare uno spazio 3D per le trasformazioni della card.
2. Per avvicinare la card (`card` con il nome classe `translateZ()`) all'utente, utilizzare la funzione `50px` con un valore di `div`. Questo simulerà l'avanzamento della card nello spazio 3D.
3. Applicare un effetto di inclinazione lungo l'asse x alla descrizione della card (div con il nome classe `card-description-wrapper`) utilizzando la proprietà `transform` con la funzione `skewX()` e un valore di `10deg`.

OnJvb3QgewogIC0tdGltZTogNDAwMG1zOwogIC0tdGltZS1mdW5jdGlvbjogY3ViaWMtYmV6aWVyKDAuMTY1LCAwLjg0LCAwLjQ0LCAxKTsKfQoKLmNvbnRhaW5lciB7CiAgYm94LXNoYWRvdzogMHB4IDBweCA1cHggcmdiYSgwLCAwLCAwLCAwLjUpOwogIHBhZGRpbmc6IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKCiAgcGVyc3BlY3RpdmU6IDQwMHB4Owp9CgouY2FyZDpob3ZlciB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVaKDUwcHgpOwp9CgouY2FyZDpob3ZlciAuY2FyZC1kZXNjcmlwdGlvbi13cmFwcGVyIHsKICBib3gtc2hhZG93OiAwcHggMHB4IDEwcHggcmdiYSgwLCAwLCAwLCAwLjUpOwogIGJhY2tncm91bmQtY29sb3I6ICNmNmYxZjE7CgogIHRyYW5zZm9ybTogc2tld1goMTBkZWcpOwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKaDMsCnAgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKfQoKLmNhcmQgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA0MDBweDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDBweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC41KTsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogdHJhbnNmb3JtOwogIHRyYW5zaXRpb24tZHVyYXRpb246IHZhcigtLXRpbWUpOwogIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiB2YXIoLS10aW1lLWZ1bmN0aW9uKTsKfQoKLmNhcmQtZGVzY3JpcHRpb24td3JhcHBlciB7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgcGFkZGluZzogMTBweCAwOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IGFsbDsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiB2YXIoLS10aW1lKTsKICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogdmFyKC0tdGltZS1mdW5jdGlvbik7Cn0KCi5jYXJkLXRpdGxlIHsKICBmb250LXNpemU6IDE0cHg7CiAgY29sb3I6ICMxNDZjOTQ7Cn0KCi5jYXJkLXRleHQgewogIGZvbnQtc2l6ZTogMTJweDsKICBtYXJnaW4tdG9wOiA1cHg7CiAgY29sb3I6ICMxOWE3Y2U7Cn0=

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.

Sfida: Combinare Traslazione e Inclinazione

Compito

Awesome!

Sfida: Combinare Traslazione e Inclinazione

Compito