In questo articolo ci occupiamo delle trasformazioni CSS 3D. Con un supporto ormai esteso alle più recenti release dei principali browser, è difficile considerare questa feature dei CSS come sperimentale, è tempo di iniziare a valutarne tutte le potenzialità in vista di un utilizzo esteso e in progetti reali.
>> Leggi la lezione "Trasformazioni CSS3" della Guida CSS3
Per introdurre l'argomento, esaminiamo un semplice effetto in cui le trasformazioni tridimensionali sono applicate ai link, in modo tale che all'hover presentino un'animazione che li ruota in uno spazio, appunto, tridimensionale. La tecnica è usata, tra gli altri, sul sito Web Designer Depot, nello specifico per la sezione delle risorse correlate in fondo agli articoli. Potete vederla in azione anche nella nostra prima demo.
Il markup HTML
Perché si possa applicare l'effetto, è necessario strutturare i link in un modo preciso nel codice HTML:
<a href="#" class="roll">
<span data-title="Questo link è 3D e ruota!">
Questo link è 3D e ruota!
</span></a>All'elemento a assegniamo una classe .roll.
Nel contesto del link, inseriamo poi un elemento span. Esso dovrà avere un attributo di tipo data-title secondo la specifica HTML5. Il valore di questo attributo deve corrispondere a quello del testo vero e proprio del link (nel nostro caso la frase 'Questo link è 3D e ruota!'). Lo span deve racchiudere il testo del link.
>> Leggi la lezione sugli attributi "Data-*" e gli altri attributi globali
Qualcuno si starà chiedendo la ragione della presenza non tanto dello span aggiuntivo, quanto del testo duplicato. Per comprenderne la ragione, torniamo un attimo alla demo.
Inizialmente, il testo che è visibile è quello del link, nulla di complicato. Quando passiamo con il mouse sul link stesso, si attiva l'animazione che ruota l'elemento nello spazio 3D. A quel punto, all'hover sul link, è come se ruotassimo un cubo portando in primo piano un'altra faccia. Se il testo non fosse duplicato in qualche modo, avremmo questo risultato. In sintesi: il testo standard del link è il contenuto della prima faccia del cubo, quello inserito come valore dell'attributo data-title è il contenuto della seconda faccia, quella che compare quando ruotiamo il cubo.
Una volta spiegato questo meccanismo, possiamo passare all'implementazione dell'effetto.
Il codice CSS
Ecco il codice CSS della demo. Abbiamo espunto per comodità le parti con i prefissi proprietari relativi alle transizioni e alle trasformazioni, potete verificarle studiando direttamente gli esempi.
a {
text-decoration: none;
color: #2ba6cb; /* Colore iniziale del link. Lo sfondo è quello del div sottostante */
font-weight: bold;
}
.roll {
display: inline-block;
overflow: hidden;
vertical-align: top;
perspective: 600px;
perspective-origin: 50% 50%;
}
.roll span {
display: block;
position: relative;
padding: 0 3px; /* Padding sul link */
transition: all 400ms ease;
transform-origin: 50% 0%;
transform-style: preserve-3d;
}
.roll:hover span {
background: #2ba6cb; /* Colore di sfondo del link durante la transizione */
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 3px; /* Padding sullo span. Deve corrispondere a quello del link */
color: #fff; /* Colore finale del link */
background: #2ba6cb; /* Colore di sfondo finale */
transform-origin: 50% 0%;
transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}Se volete usare l'effetto e personalizzarlo, potete lasciare intatto la maggior parte di questo codice, specie le parti delle trasformazioni. Volendo intervenire, si può fare per specifiche parti (alcune sono state commentate nello snippet):
- la dimensione del testo e il font;
- il colore iniziale del testo del link;
- il colore iniziale di sfondo del link;
- il padding sul link e sullo span;
- il colore di sfondo dell'elemento durante la transizione;
- il colore finale del testo del link;
- il colore finale dello sfondo del link.
Le funzioni di trasformazione 3D
Senza scendere nei dettagli, possiamo anche soffermarci un attimo sulle funzioni e proprietà con cui si attiva la trasformazione 3D, giusto per prendere confidenza con i concetti di base.
Sui link (gli elementi a con classe .roll) troviamo innanzitutto questa regola:
.roll {
perspective: 600px;
perspective-origin: 50% 50%;
}perspective
La proprietà perspective è fondamentale nel contesto delle trasformazioni 3D. Va applicata sull'elemento che subirà, insieme ai suoi elementi figli, la trasformazione. Si può dire che prepara il terreno creando il contesto (lo spazio tridimensionale) in cui gli oggetti saranno ruotati, traslati, etc. Non ha alcun effetto visibile sull'elemento cui viene applicata.
perspective-origin
La proprietà perspective va accompagnata con la definizione di una distanza (per noi 600px). Questo valore imposta, semplificando, la profondità dello spazio 3D, la distanza del punto di fuga. Più il valore è alto, più vicino apparirà il punto di fuga, meno intenso risulta l'effetto 3D. Con valori bassi, lo spazio si fa più profondo, l'oggetto si allontana, appare più piccolo, l'effetto 3D è più intenso. Provate a modificare il valore da 600px a 60px nella demo...
Con perspective-origin, invece, fissiamo la posizione del punto di fuga, che tipicamente sarà al centro.
transform-origin
Le funzioni di trasformazione vere e proprie le troviamo a partire dall'elemento span. Su di esso, oltre a impostare una transizione di 400ms, troviamo queste regole:
.roll span {
transform-origin: 50% 0%;
transform-style: preserve-3d;
}Con transform-origin impostiamo il punto da cui partirà la trasformazione. Si impostano due coordinate, la prima per l'asse orizzontale, la seconda per quello verticale. La nostra partirà orizzontalmente dal centro (50%) e verticalmente dall'alto (0%).
transform-style
Con l'istruzione transform-style: preserve-3d facciamo in modo che gli elementi figli vengano anch'essi resi in uno spazio 3D. Provate a modificare questo valore con flat per verificare il comportamento alternativo.
trasform, translate3d, rotateX: applicare le trasformazioni
Tutte queste regole non fanno che preparare il terreno rispetto a quanto avviene attivando lo stato :hover. Finora, infatti, non abbiamo fatto altro che dire: crea uno spazio tridimensionale per le trasformazioni a partire da questa prospettiva, le trasformazioni avranno origine da questo punto e saranno applicate anche ai figli di questo elemento. Di 3D reale neanche l'ombra.
Ma cosa succede quando portiamo il mouse sul link? Prima cosa:
.roll:hover span {
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}Lo span viene traslato nello spazio tridimensionale (translate3d) e ruotato sull'asse X di -90°.
Ugualmente, viene traslato e ruotato l'elemento creato come contenuto generato e che corrisponde al testo duplicato (ricordate l'attributo data-title?):
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 3px; /* Padding sullo span. Deve corrispondere a quello del link */
color: #fff; /* Colore finale del link */
background: #2ba6cb; /* Colore di sfondo finale */
transform-origin: 50% 0%;
transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}Miglioriamo l'implementazione dell'effetto
A questo punto abbiamo un bell'effetto 3D, ma anche una serie di criticità non trascurabili.
Innanzitutto, la complicazione di dover creare un markup HTML piuttosto complesso e con un elemento span aggiuntivo di cui si farebbe volentieri a meno.
La soluzione ci viene da un piccolo script creato da Hakim El Attab. Lo abbiamo usato nella seconda demo.
Ecco il codice Javascript:
var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined;
function linkify( selector ) {
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];
if( !node.className || !node.className.match( /roll/g ) ) {
node.className += ' roll';
node.innerHTML = '' + node.innerHTML + '';
}
};
}
}
linkify( '#contenuto-roll a' );Lo script verifica il supporto delle trasformazioni 3D sul browser in uso. Se il supporto c'è, rintraccia gli elementi a, assegna ad essi la classe .roll e crea automaticamente lo span con l'attributo data-title valorizzato con il testo del link! Nel markup HTML, quindi, possiamo scrivere semplicemente così:
<a href="#">Questo link è 3D e ruota!</a>Comodissimo, ma su quali link applicare l'effetto? Se vogliamo che venga applicato su tutti, useremo nell'ultima riga dello script questa istruzione:
linkify( 'a' );Se vogliamo invece usarlo solo in una specifica sezione della pagina, useremo i selettori discendenti, come nella nostra demo:
linkify( '#contenuto-roll a' );L'effetto è presente solo sui link che si trovano all'interno del div con id #contenuto-roll.
L'adozione dello script, risolve un'altro problema. Sui browser che supportano il contenuto generato ma non le trasformazioni, i link non avranno l'aspetto iniziale e predefinito, ma quello finale della trasformazione! Ecco uno screenshot da Opera relativo all'esempio 1:
Grazie allo script, invece, ciò non accade, perché i link non prendono la classe .roll e lo span aggiuntivo! Ecco lo screenshot:
Variazioni sul tema
Tutto qui. Una volta appreso il meccanismo di funzionamento, potremo applicare l'effetto nei contesti più svariati. Noi l'abbiamo fatto nel terzo, quarto e quinto esempio su un menu verticale, apportando di volta in volta alcune modifiche nei colori dei link e degli sfondi.
Tutti gli esempi sono disponibili in allegato.
