Blog

Animazione rotazione CSS senza nessun javascript

DI    ,

Animiamo i nostri box con un effetto rotazione in CSS

Le animazioni css sono semplici da usare e rendono il vostro sito web sicuramente più accattivante, senza appesantirlo o rallentarlo.

Esistono molteplici tutorial che vi guidano alla creazione di effetti analoghi, ma molti li ho trovati complessi e che fanno uso di javascript per creare funzioni particolari. Il mio obiettivo è quello di rendere il tutto più semplice, creando l’indispensabile per la realizzazione dell’animazione.

Vediamo come applicare un’animazione css di rotazione 3D ai vostri contenitori o div.

Prima di tutto, potete scaricare l’animazione CSS dal pulsante sottostante per analizzare voi stessi il codice.

Ora vediamo come è costruita la struttura HTML del box che avrà l’effetto di rotazione. Ovviamente potete adattarlo a vostro piacimento per dimensioni e contenuti.

Ora vediamo il cuore dell’animazione di rotazione, cioè la parte del CSS.

Tramite questo codice CSS andremo ad animare orizzontalmente il nostro box.

Se preferite animare il blocco verticalmente, basterà modificare la porzione finale con il seguente codice.

Di seguito potete vedere l’effetto finale di come risulta l’animazione di rotazione CSS.

Titolo



Box rotazione orizzontale

Qua puoi inserire qualsiasi tipologia di contenuto.
Immagini, testi, form.

Titolo



Box rotazione verticale

Qua puoi inserire qualsiasi tipologia di contenuto.
Immagini, testi, form.

Ora non vi rimane che abbellire i vostri box tramite css con colori, decorazioni, immagini.

Nota: per quanto riguarda Internet Explorer questo metodo è supportato solo dalla versione 10 in su.



Seguici su Facebook

logo footer wolftrick