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
8271 | Articolo pubblicato 3 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.
  • luca

    ciao domanda se volessi un altra immagine al posto della scritte come dovrei procedere?

    • pixolo

      Sostituire semplicemente il link sorgente dell’immagine con il tuo desidarato. Lo trovi alla linea 3 del codice HTML riportato a inizio articolo.
      Saluti

      • luca

        ti ringrazio per la risposta ma non mi sono spiegto bene,io voglio mettere 2 immagini al posto della scritta ci voglio mettere un altra immagine…

4
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×