15 esempi di trasformazioni 3D con CSS

15 esempi di trasformazioni 3D con CSS

 
 

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

 

 

 

 

 

 

 

 
 

tags: css3 webdesign tutorials css3effects 3D


Questo sito fa uso di cookie, anche di terze parti, per migliorare la tua esperienza di navigazione. Accettando questa informativa dai il consenso al loro utilizzo. È possibile modificare le impostazioni dei cookie o ottenere ulteriori informazioni qui: Politica dei cookies.