Trasformazioni CSS 3D in Internet Explorer 10

Trasformazioni CSS 3D in Internet Explorer 10

Nuovo appuntamento con gli approfondimenti su Internet Explorer 10: in questa puntata parleremo di terza dimensione nelle trasformazioni CSS, che permettono di realizzare effetti grafici di notevole impatto visivo

di pubblicato il nel canale Web
 

CSS e terza dimensione - segue

Dopodiché basta applicare la regola transform: rotateY(72deg); per ottenere, ad esempio, una rotazione di 72 gradi lungo l’asse verticale (terza carta dell’esempio). Per ulteriori approfondimenti visitare questo link: http://msdn.microsoft.com/en-us/library/windows/apps/jj665791.aspx.

Una volta presa padronanza con le trasformazioni 3D, è possibile costruire delle trasformazioni animate specificando dei keyframe, cioè dei fotogrammi in instanti particolari di tempo, che specificano le trasformazioni da applicare in sequenza. Ecco un esempio: http://ie.microsoft.com/testdrive/ieblog/2012/Feb/02_CSS33DTransformsinIE10_10.html.


#parentDiv {
   perspective: 500px;
   perspective-origin: 150px 500px;
}

#div1 {
   transform-origin: 150px 500px;
   animation: scrollText 200s linear infinite;
}

@keyframes scrollText {
   0% { transform: rotateX(45deg) translateY(500px); }
   100% { transform: rotateX(45deg) translateY(-8300px); }
}
 

I keyframe specificati in scrollText impostano la rotazione a 45 gradi dall’inizio alla fine, mentre la traslazione lungo l’asse Y varia da 500px a -8300px (essendo un valore negativo, la traslazione avverrà verso l’alto). Naturalmente è possibile creare tutti i keyframe che si desiderano, per generare così animazioni molto complesse. La regola animation, invece, specifica come usare questi keyframe, quindi ne specifica la durata, la funzione di interpolazione da usare (in questo caso una semplice LERP, o Linear Interpolation).

Senza entrare troppo nei dettagli matematici, la funzione di interpolazione serve per calcolare il valore della trasformazione negli istanti di tempo intermedi tra un key frame e l’altro. Ad esempio, se abbiamo una trasformazione lungo l’asse X che va da 10px a 20px in 10 secondi, applicando l’interpolazione linear verranno calcolati i frame intermedi in questo modo:

0 secondi = 10px
1 secondo = 11px
2 secondi = 12px
…
5 secondi = 15px
...
10 secondi = 20px

Se disegnassimo su un grafico X / Tempo questi punti otterremmo un segmento di retta (in matematica la funzione “lineare” è una funzione a forma di retta). Per avere effetti diversi, è possibile applicare diverse funzioni di interpolazione, le cui curve sono descritte qui: http://msdn.microsoft.com/en-us/library/windows/apps/hh466322.aspx.

Per ulteriori dettagli e approfondimenti, rimandiamo come di consueto alla documentazione ufficiale:

http://www.w3.org/TR/css3-transforms/
http://blogs.msdn.com/b/ie/archive/2012/02/02/css3-3d-transforms-in-ie10.aspx


 

9 Commenti
Gli autori dei commenti, e non la redazione, sono responsabili dei contenuti da loro inseriti - info
birmarco08 Luglio 2013, 22:43 #1
Era una cosa che conoscevo di già ma bell'articolo! Fa piacere che si parli ancora di queste cose su siti di tecnologia e informatica, altre testate sono diventate troppo consumer...
Wikkle09 Luglio 2013, 18:04 #2
Originariamente inviato da: emiliano84
incredibile come internet explorer 10/11 sia diventato il mio primo browser, non lo avrei mai immaginato, non lo era mai stato


come mai lo preferisci a Chrome?
maumau13809 Luglio 2013, 18:12 #3
Originariamente inviato da: birmarco
Era una cosa che conoscevo di già ma bell'articolo! Fa piacere che si parli ancora di queste cose su siti di tecnologia e informatica, altre testate sono diventate troppo consumer...


Quotone.
Wikkle09 Luglio 2013, 19:24 #4
Originariamente inviato da: emiliano84

ti consiglio di provarlo ... mi spiace che gente continua a parlarne male senza nemmeno avero visto


Lo conosco e lo uso, anche perchè devo usarli tutti i browser, anche per lavoro. Lo trovo notevolmente migliorato e lo metto al 2° posto, dopo Chrome.

L'usabilità e la velocità di chrome, non ha però rivali. Imho, ovviamente
Wikkle09 Luglio 2013, 20:53 #5
Che per fare prima uso tutte le scorciatoie da tastiera ed ha molte più personalizzazioni rispetto IE
sintopatataelettronica09 Luglio 2013, 21:19 #6
A parte che mi sembra una trasformazione 2.5D, al massimo..

Ma poi.. che UTILITA' spaventosa !!! (infatti la gente nei commenti sta parlando d'altro )
Cooperdale11 Luglio 2013, 10:04 #7
Originariamente inviato da: emiliano84
per l'utilizzo come sviluppatore invece avevo abbandonato chrome per firefox (ho chiuso tutti i rapporti con scroogle) ...


E' fantastico come ogni azienda o persona fisica abbia i suoi detrattori su Internet.
birmarco11 Luglio 2013, 14:32 #8
Originariamente inviato da: emiliano84
incredibile come internet explorer 10/11 sia diventato il mio primo browser, non lo avrei mai immaginato, non lo era mai stato


Anche per me! Anche se usando la Beta di 11 mi sembra un pochino più instabile del 10, ma appunto, è una Beta Ho abbandonato FF perché mi dava problemi sul mio PC (e non ho ancora capito perché!)

Originariamente inviato da: sintopatataelettronica
A parte che mi sembra una trasformazione 2.5D, al massimo..

Ma poi.. che UTILITA' spaventosa !!! (infatti la gente nei commenti sta parlando d'altro )


Si parla d'altro perché è già stato detto tutto nell'articolo

E cmq è una cosa molto utile, se si sviluppa per il web. Una volta era necessario Javascript o peggio, Flash!, invece ora puoi fare tutto direttamente da CSS3, non sai che comodità!

Può sembrare inutile applicare trasformazioni 3D, ma se stai sviluppando un gioco oppure un sito con una interfaccia più avanzata, queste cose sono come la manna, poca fatica, massima resa!
birmarco11 Luglio 2013, 15:42 #9
Originariamente inviato da: emiliano84
eh si, ma con i tool di sviluppo integrati, sembrano davvero sulla strada giusta



quoto


I tool di sviluppo non li uso, lo sviluppo web che faccio è marginale, o cmq non sono mai cose così avanzate da richiedere tali tool, al massimo quello per vedere il codice sorgente

Devi effettuare il login per poter commentare
Se non sei ancora registrato, puoi farlo attraverso questo form.
Se sei già registrato e loggato nel sito, puoi inserire il tuo commento.
Si tenga presente quanto letto nel regolamento, nel rispetto del "quieto vivere".

La discussione è consultabile anche qui, sul forum.
 
^