## Compito
Crea una scheda accattivante per un negozio online di elettronica, in cui ogni scheda includa un'immagine, un nome e un prezzo. L'obiettivo è migliorare l'aspetto visivo incorporando le seguenti animazioni:
1. **Ingrandimento immagine**: Utilizzare la regola dei keyframes `increaseImageSize` per aggiungere un effetto di ingrandimento all'**elemento immagine**, rendendolo più grande del 20%. Il risultato finale deve essere `scale(1.2)`.
2. **Rotazione prezzo**: Implementare la regola dei keyframes `rotatePrice` per aggiungere un effetto di rotazione all'**elemento prezzo**, completando un giro completo. Il risultato finale deve essere `rotate(360deg)`.

Utilizzare le regole di keyframes predefinite.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDx1bCBjbGFzcz0ibGlzdCI+CiAgICAgICAgPGxpIGNsYXNzPSJpdGVtIj4KICAgICAgICAgIDxpbWcKICAgICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvdHJhbnNmb3JtYXRpb25zK3NlY3Rpb24vdHJhbnNmb3JtYXRpb24rY2hhbGxlbmdlMS1jb21wdXRlci5wbmciCiAgICAgICAgICAgIGFsdD0iY29tcHV0ZXIiCiAgICAgICAgICAgIHdpZHRoPSIzMDBweCIKICAgICAgICAgICAgY2xhc3M9Iml0ZW0taW1hZ2UiCiAgICAgICAgICAvPgogICAgICAgICAgPHAgY2xhc3M9Iml0ZW0tZGVzY3JpcHRpb24iPkNvbXB1dGVyPC9wPgogICAgICAgICAgPHNwYW4gY2xhc3M9Iml0ZW0tcHJpY2UiPiQxNi45OTwvc3Bhbj4KICAgICAgICA8L2xpPgogICAgICAgIDxsaSBjbGFzcz0iaXRlbSI+CiAgICAgICAgICA8aW1nCiAgICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL3RyYW5zZm9ybWF0aW9ucytzZWN0aW9uL3RyYW5zZm9ybWF0aW9uK2NoYWxsZW5nZTEtbGFwdG9wLnBuZyIKICAgICAgICAgICAgYWx0PSJsYXB0b3AiCiAgICAgICAgICAgIHdpZHRoPSIzMDBweCIKICAgICAgICAgICAgY2xhc3M9Iml0ZW0taW1hZ2UiCiAgICAgICAgICAvPgogICAgICAgICAgPHAgY2xhc3M9Iml0ZW0tZGVzY3JpcHRpb24iPkxhcHRvcDwvcD4KICAgICAgICAgIDxzcGFuIGNsYXNzPSJpdGVtLXByaWNlIj4kMTIuNTk8L3NwYW4+CiAgICAgICAgPC9saT4KICAgICAgICA8bGkgY2xhc3M9Iml0ZW0iPgogICAgICAgICAgPGltZwogICAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9hZHZhbmNlZCtjc3MrdGVjaG5pcXVlcy90cmFuc2Zvcm1hdGlvbnMrc2VjdGlvbi90cmFuc2Zvcm1hdGlvbitjaGFsbGVuZ2UxLXNtYXJ0cGhvbmUucG5nIgogICAgICAgICAgICBhbHQ9InNtYXJ0cGhvbmUiCiAgICAgICAgICAgIHdpZHRoPSIzMDBweCIKICAgICAgICAgICAgY2xhc3M9Iml0ZW0taW1hZ2UiCiAgICAgICAgICAvPgogICAgICAgICAgPHAgY2xhc3M9Iml0ZW0tZGVzY3JpcHRpb24iPlNtYXJ0cGhvbmU8L3A+CiAgICAgICAgICA8c3BhbiBjbGFzcz0iaXRlbS1wcmljZSI+JDguNDk8L3NwYW4+CiAgICAgICAgPC9saT4KICAgICAgPC91bD4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

Lml0ZW06aG92ZXIgLml0ZW0taW1hZ2UgewogIGFuaW1hdGlvbjogaW5jcmVhc2VJbWFnZVNpemUgNTAwbXMgbGluZWFyIGZvcndhcmRzOwp9CgpAa2V5ZnJhbWVzIGluY3JlYXNlSW1hZ2VTaXplIHsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICAwJSB7CiAgICB0cmFuc2Zvcm06IF9fXzsKICB9CiAgNTAlIHsKICAgIHRyYW5zZm9ybTogX19fOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogX19fOwogIH0KICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKLml0ZW06aG92ZXIgLml0ZW0tcHJpY2UgewogIGFuaW1hdGlvbjogcm90YXRlUHJpY2UgMjAwMG1zIGxpbmVhciBmb3J3YXJkczsKfQoKQGtleWZyYW1lcyByb3RhdGVQcmljZSB7CiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCiAgMCUgewogICAgdHJhbnNmb3JtOiBfX187CiAgfQogIDUwJSB7CiAgICB0cmFuc2Zvcm06IF9fXzsKICB9CiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IF9fXzsKICB9CiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBhYm92ZSB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Cgp1bCB7CiAgcGFkZGluZy1sZWZ0OiAwOwogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKICBsaXN0LXN0eWxlOiBub25lOwp9CgpwIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA2MDBweDsKICBib3JkZXItcmFkaXVzOiA1cHg7Cn0KCi5saXN0IHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwp9CgouaXRlbSB7CiAgYm9yZGVyOiAycHggc29saWQgI2ViNDU1ZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMmIzNDY3OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgcGFkZGluZzogMjBweCAxMHB4OwogIHdpZHRoOiAxODBweDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLml0ZW06bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLXJpZ2h0OiAxMHB4Owp9CgouaXRlbS1pbWFnZSB7CiAgd2lkdGg6IDE2MHB4Owp9CgouaXRlbS1kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLXRvcDogMzBweDsKICBmb250LXNpemU6IDE4cHg7CiAgY29sb3I6ICNmY2ZmZTc7Cn0KCi5pdGVtLXByaWNlIHsKICBtYXJnaW4tdG9wOiAxMHB4OwogIGNvbG9yOiAjYmFkN2U5Owp9

1. Per l'animazione di scaling:
   - All'inizio (punto 0%), utilizzare `scale(1)` per mantenere la dimensione originale;
   - Al punto intermedio (punto 50%), aumentare la dimensione a `scale(1.1)`;
   - Alla fine (punto 100%), aumentare la dimensione a `scale(1.2)`.
2. Per l'animazione di rotazione:
   - All'inizio (punto 0%), mantenere l'angolo di rotazione a `rotate(0deg)`;
   - Al punto intermedio (punto 50%), ruotare a metà fino a `rotate(180deg)`;
   - Alla fine (punto 100%), completare la rotazione con `rotate(360deg)`.

Lml0ZW06aG92ZXIgLml0ZW0taW1hZ2UgewogIGFuaW1hdGlvbjogaW5jcmVhc2VJbWFnZVNpemUgNTAwbXMgbGluZWFyIGZvcndhcmRzOwp9CgpAa2V5ZnJhbWVzIGluY3JlYXNlSW1hZ2VTaXplIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpOwogIH0KICA1MCUgewogICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGUoMS4yKTsKICB9Cn0KCi5pdGVtOmhvdmVyIC5pdGVtLXByaWNlIHsKICBhbmltYXRpb246IHJvdGF0ZVByaWNlIDIwMDBtcyBsaW5lYXIgZm9yd2FyZHM7Cn0KCkBrZXlmcmFtZXMgcm90YXRlUHJpY2UgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDApOwogIH0KICA1MCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTsKICB9CiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOwogIH0KfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCnVsIHsKICBwYWRkaW5nLWxlZnQ6IDA7CiAgbWFyZ2luLXRvcDogMDsKICBtYXJnaW4tYm90dG9tOiAwOwogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCnAgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKfQoKLmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgd2lkdGg6IDYwMHB4OwogIGJvcmRlci1yYWRpdXM6IDVweDsKfQoKLmxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KCi5pdGVtIHsKICBib3JkZXI6IDJweCBzb2xpZCAjZWI0NTVmOwogIGJhY2tncm91bmQtY29sb3I6ICMyYjM0Njc7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICBwYWRkaW5nOiAyMHB4IDEwcHg7CiAgd2lkdGg6IDE4MHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9CgouaXRlbTpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tcmlnaHQ6IDEwcHg7Cn0KCi5pdGVtLWltYWdlIHsKICB3aWR0aDogMTYwcHg7Cn0KCi5pdGVtLWRlc2NyaXB0aW9uIHsKICBtYXJnaW4tdG9wOiAzMHB4OwogIGZvbnQtc2l6ZTogMThweDsKICBjb2xvcjogI2ZjZmZlNzsKfQoKLml0ZW0tcHJpY2UgewogIG1hcmdpbi10b3A6IDEwcHg7CiAgY29sb3I6ICNiYWQ3ZTk7Cn0=

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: Applicare Ridimensionamento e Rotazione

Compito

Awesome!

Sfida: Applicare Ridimensionamento e Rotazione

Compito