Come creare un effetto rotazione 3D con CSS3

 

In questo tutorial vedremo come creare un’effetto rotazione 3D con CSS3, davvero bello e d’impatto, utilizzando la proprietà 3D Transform.

Il risultato che vogliamo raggiungere è quello di creare una sorta di cubo rotante dove un’immagine è visibile sul lato frontale e del testo è visibile invece soltanto al passaggio del mouse grazie alla rotazione dello stesso cubo sul lato adiacente.

Ecco esempio per rendere al meglio l’idea. Passate con il mouse sopra il logo di Pixolo!

Effetto rotazione 3D con CSS3 – Esempio


Seguici su Facebook! Resta sempre aggiornato su tutte le nuove risorse gratuite pubblicate su Pixolo!

E passiamo ora al codice da implementare sulle vostre pagine.

Codice HTML

In sostanza nel div con classe “item” inserirete una vostra immagine mentre nello span con classe “information” inserirete o del testo a piacimento o un’immagine naturalmente di dimensioni uguali alla prima.

Codice CSS

Nell’esempio esposto è considerata un’immagine con dimensione di 310×100 pixel come potete vedere sopra alle righe 3 e 4. Nei vostri utilizzi potrete naturalmente usare immagini di qualsiasi dimensione, basterà modificare i valori alle righe 3 e 4. Le dimensioni del secondo contenitore, quallo visibile dopo la rotazione, ha anch’esso le stesse dimensioni del primo come visibile alle righe 34 e 35, ma considerate che i suoi valori in questo esempio sono “al netto” del padding di 10px, specificato alla riga 38.

Bene, ricordandovi che questo effetto funziona con tutti i browser moderni (che supportano le proprietà CSS3 3D transform), non mi resta che augurarvi un buon lavoro nell’implementazione di questo effetto rotazione 3D con CSS3 all’interno delle vostre pagine web.

Alla prossima risorsa!

pixolo ads
Cambia Copertina
11371 | Articolo pubblicato 5 anni fa nella categoria Css - Html, In evidenza.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.