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 Xe Y 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

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.