Animare un menu con le trasformazioni CSS

Le trasformazioni CSS si rivelano particolarmente utili quando vogliamo creare degli effetti ad hoc sui menu. Per esempio, in un menu di navigazione vorremmo che al passaggio del mouse sui link le voci del menu si spostassero e ruotassero. Purtroppo al momento i browser supportano queste proprietà  solo attraverso estensioni specifiche che, ricordiamolo, non sono valide da un punto di vista della grammatica standard dei CSS.

Ecco quindi il codice necessario per ottenere questo effetto:

#navigation a:hover {
 -moz-transform: rotate(-10deg);
 -webkit-transform: rotate(-10deg);
 -o-transform: rotate(-10deg);
}

E questo è il risultato finale. Come si può notare, i blocchi vengono ruotati di dieci gradi in senso antiorario, creando un peculiare effetto di movimento.