CSS3: rotate

Da un po’ di tempo avevo intenzione di modificare il logo del mio sito in modo da farlo ruotare “tridimensionalmente”. All’inizio ho cercato plugin e script JQuery ma quando ho scoperto che era possibile creare l’animazione con CSS3 ho subito optato per questa soluzione vista la maggior facilità di implementazione su wordpress. Questo codice è naturalmente utilizzabile con qualsiasi tipo di testo/immagine/altro e è necessario utilizzare i vari prefissi delle proprietà -webkit-, -moz-, -o-, -ms- per assicurarsi che il codice venga interpretato correttamente da tutti (o quasi) i browser in circolazione.
Procedendo per gradi, vediamo come utilizzare le proprietà transform, animation e keyframe.

Intanto è necessario avere il nostro codice html pronto:

Ora vediamo come ottenere la rotazione del nostro testo

Rotazione continua

Modificando il parametro animation-duration si rallenta/velocizza la rotazione.
Per fermare la rotazione, ad esempio quando il mouse viene posizionato sopra al nostro ‘oggetto’, basta aggiungere un hover

Esempio:

francescosoave.com

 

Rotazione non continua


Vediamo come rendere più interessante e personalizzata la nostra animazione. Potremmo infatti volere che la rotazione avvenga per gradi e ad esempio si fermi per un determinato periodo di tempo fra i vari step. Ad esempio, supponiamo di voler far ruotare il nostro testo prima da 0 a 90 gradi, poi da 90 a 180 e così via, fermandosi in mezzo ad ogni step per qualche secondo.
Il codice si complica un po’ perchè andiamo ad utilizzare i keyframes che richiedono l’utilizzo valori percentuali.


L’idea di base è: al valore 0% (corrispondente alla keyword from) corrisponde l’angolo iniziale della rotazione (in questo caso 0°). Conseguentemente, al valore 100% (relativo alla keyword to) corrisponde l’angolo finale di rotazione (in questo caso 360°). A seconda di quanti movimenti vogliamo far eseguire al nostro oggetti potremo aggiungere diversi ‘step’ attraverso i valori percentuali. Nel caso del logo del mio sito, il pattern è il seguente: 0-180 -> 180-360 e si ripete all’infinito (grazie all’attributo infinite). Come sopra, aggiungendo un semplice hover si può decidere di mettere in pausa l’animazione.


Infine, per rendere più ‘smooth’ (morbida) l’animazione, modifichiamo la proprietà animation-timing-function, sostituendo l’attributo linear con l’attributo ease-in-out. Questo farà in modo di rallentare/velocizzare l’animazione nei punti di partenza/arrivo relativi ai nostri 3 step.

Esempio:

francescosoave.com

 

Qui c’è un divertente esempio che mostra le potenzialità del css