15 Esempi Di Trasformazioni 3D con Css

by admin admin Date: 30-07-2013 css3 webdesign tutorials css3effects 3D


Lo sviluppo e l'evoluzione dei browser web come Safari, Chrome e Firefox ha dato agli sviluppatori web ed ai web designers, l'opportunitá di sbizzarrirsi con  la creazione di effetti bellissimi, semplicemente usando il CSS3 senza bisogno di javascript, ottenendo risultati favolosi.

Le animazioni 3d possono essere gestite, come per quelle 2d, dalla proprietà -webkit-transform che può essere manipolata in modi differenti:

  • translate3d(x,y,z), translateZ(z)
    La prima funzione trasla l’elemento su un piano tridimensionale in base ai parametri indicati, mentre la seconda funzione solo per l’asse Z. Il valore di Z, diversamente da XY non può essere una percentuale.
  • scale3d(x,y,z), scaleZ(z)
    Analogamente alle due precedenti, le funzioni scale ridimensionano l’elemento in base ai parametri indicati.
  • rotateX(angolo), rotateY(angolo), rotate3d(x,y,z,angolo)
    Le prime due funzioni ruotano semplicemente l’elemento sulle assi orizzontale e verticale. L’angolo può essere indicato in gradi (°), radianti (rad), o gradienti (grad). L’ultima funzione permette di ruotare tridimensionalmente l’elemento  indicando, tramite X, Y e Z un vettore immaginario che sia l’asse di rotazione e l’angolo corrispondente. rotate3d è la funzione che utilizzeremo oggi.
  • perspective(p)
    Questa funzione ci permette di impostare una prospettiva dalla quale visualizzare l’animazione.

Possiamo immaginare un utilizzo molto futuristico per immagini, banner ed animazioni mozzafiato con le quali rendere molto molto appariscenti le nostre pagine web.

Stiamo a vedere come procederà l’aggiornamento dei motori dei browser web che ora non supportano tutte le nuove regole CSS.

Nel frattempo vi lasciamo con una lista di 15 esempi di trasformazioni 3D con CSS

1. 3D Rotating Molecules on the iPhone/iPad

2. Beercamp 2011

3. Panic — Transmit

4. Reeder for Mac

5. BigText

 

6. Wonder Webkit

7. The Matrix Revolutions

8. CSS3 Time Machine

9. Flux

10. Photo Transitions

11. VR

12. A 3D FPS concept

13. Natural object-rotation

14. 3D cube

15. Understanding CSS 3D transforms

 

 

 

 

 

 

 

 
by admin admin Date: 30-07-2013 css3 webdesign tutorials css3effects 3D visite : 5010  
 
 
 
 

Articoli correlati

    Paesaggi Parallax costruiti interamente con CSS e HTML

    Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

    CSS: la funzione Calc()

    Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle…

    16 siti per scaricare immagini vettoriali gratuite

    Le immagini vettoriali, sono fondamentali per chi si occupa di grafica e web design.   La caratteristica che contraddistingue un’immagine vettoriale, da una normale, come ad esempio una fotografia, è che…

    Realizzare banner animati con CSS3

    Avete dei clienti esigenti che "ancora" vi chiedono movimentati, sbrilluccicanti banner in flash? Se siete stanchi di rispondere che ormai il flash è andato in pensione potete proporre una soluzione…

    Photoshop: 14 tutorial natalizi

    Tra Natale, Capodanno ed Epifania, gli sfondi per il desktop e le cartoline a tema sono il lavoro piú richiesto a designers e grafici, dando a tutti loro la possibilità di sbizzarrirsi…

    I 10 migliori generatori di gradienti CSS

    Difficilmente si potrà creare il gradiente perfetto affidandoci alla pura e semplice scrittura di codice CSS. Avere un riferimento visivo in fase di creazione è fondamentale. Ecco perché tra i tool…

    15 effetti di testo avanzati con CSS3

    Le nuove proprietà CSS3 sono senza dubbio un grande vantaggio per poter modellare a piacimento tutti gli elementi di una pagina web senza dover ricorrere all'utilizzo del codice javascript. Una delle…

    8 strumenti per formattare ed ottimizzare i CSS

    La fase di ottimizzazione dei file CSS è forse una delle piú importanti per velocizzare il caricamento di un sito web o blog. Per raggiungere questo obiettivo è necessario ripulire il…

    50 tutorials Wordpress per web designers e sviluppatori web

    Wall Street Journal, Ford, Sony, Katy Perry, GigaOM, CNN. Tutte marche conosciute. Cos'hanno in comune? Tutte hanno il sito “Powered by WordPress”. Wordpress, senza dubbio è attualmente la piattaforma piú popolare…

    Come creare una dashboard simil Windows8 con CSS3 e jQuery

    Come creare un'animazione simil Windows8 con CSS3 e jQuery Markup CSS Javascript IL MARKUP L'intera struttura è abbastanza semplice: La dashboard è costituita da una serie di "box" o riquadri, di due dimensioni, floatanti dentro…

    Raccolta di 50 Tools per sviluppatori e web designers

    Come ormai nostra abitudine, torniamo a dare una mano a tutti coloro che vogliono avventurarsi nel magico mondo dello sviluppo web e del web design e lo facciamo grazie ad una…

    Web Design: 20 Tutorial per principianti

    Oggi vi prensentiamo un'utile lista di 20 tutorials per web designers e developers alle prime armi. P.S. Tutti i tutorial sono in inglese. 1. CSS3 Keyframes Animations Tutorial 2. Create a Stylish Contact…