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

Internet Explorer 10 introduce la terza dimensione nelle trasformazioni CSS, consentendo la realizzazione di effetti grafici di notevole impatto visivo. Tramite l’impostazione di alcuni semplici parametri è possibile infatti generare degli effetti di scala / rotazione / traslazione nello spazio tridimensionale, come quello in figura.

Per ottenere questo effetto sono sufficienti poche righe di CSS:


#parent {
   perspective: 500px;
   perspective-origin: 50% 50%;
}

#div1 {
   position: absolute;
   transform-origin: 0px 0px;
   transform: rotateY(30deg);
}

#div2 {
   position: absolute;
   transform-origin: 0px 0px;
   transform: rotateY(30deg translate(220px);
}
 

La proprietà perspective serve ad indicare la distanza del punto di fuga rispetto al piano di proiezione. Se non viene impostata verrà usata la proiezione ortogonale, perdendo quindi la terza dimensione. Impostando, invece, una prospettiva gli elementi vengono disegnati in modo da rendere il senso di profondità della terza dimensione. La proprietà perspective-origin, invece, imposta la posizione del punto di fuga. Di default è impostata su 50% 50%, che corrisponde con il centro esatto del container (in questo caso un div).

Infine, le proprietà transform e transform-origin, servono a stabilire la particolare trasformazione da applicare, ed il suo punto di origine, a scelta tra rotate, scale, skew, translate, ecc... ( vedi: http://msdn.microsoft.com/en-us/library/windows/apps/jj193625.aspx ). Per la massima libertà d’azione, è possibile impostare direttamente la matrice di trasformazione con matrix3d(), che prende in input i 16 valori della matrice di trasformazione affine 4x4.

Per effetti particolari, è possibile stabilire se mostrare entrambe le facce del div, oppure se nasconderle. Ad esempio per realizzare questo effetto di rotazione:

In questo caso è sufficiente avere due div sovrapposti, uno dei quali è visibile soltanto quando è rivolto verso lo schermo:


.card, .card div {
   position: absolute;
   width: 102px;
   height: 143px;
}

.card div:nth-child(1) {
   background-image: url('redback.png');
}

.card div:nth-child(2) {
   background-image: url('8clubs.png');
   backface-visibility: hidden;
}
 

Codice HTML:


class="card">

 

 

 
Notizie
tutte le news »
^