Come ruotare un'immagine di una quantità casuale usando CSS?

Question

Ho una galleria di 20 immagini sulla mia pagina web che vorrei ruotare di una quantità casuale (da -5 a 5 gradi) al passaggio del mouse su ogni immagine. Se possibile, mi piacerebbe usare solo CSS. In caso contrario, sarei aperto a utilizzare JavaScript o jQuery.

mio CSS è la seguente:

.photo:hover { 
    z-index:1; 
    transform:rotate(6deg) scale(1.25); 
    -webkit-transform:rotate(6deg) scale(1.25); 
    -moz-transform:rotate(6deg) scale(1.25); 
    -ms-transform:rotate(6deg) scale(1.25); 
} 

6deg dovrebbe essere un numero casuale, in modo che ogni volta che l'utente passa sopra un'immagine, ruota di una quantità casuale compreso tra -5 e 5. Posso chiamare un Funzione JavaScript all'interno del CSS o anche una variabile JavaScript? Sarebbe meglio che creare 20 diversi ID CSS.

Come posso realizzare questo? Grazie!

Answer 1

Non avrete bisogno di ID CSS separati, ma potreste usare jQuery sulla classe. .each() è utilizzato al posto di .css() direttamente qui perché altrimenti l'angolo casuale verrà generato una volta e utilizzato per tutte le immagini. Per ruotare individally al passaggio del mouse:

$('.photo').hover(function() { 
    var a = Math.random() * 10 - 5; 
    $(this).css('transform', 'rotate(' + a + 'deg) scale(1.25)'); 
}, function() { 
    $(this).css('transform', 'none'); 
}); 

Se si desidera animare agevolmente queste trasformazioni, si può semplicemente aggiungere una proprietà transform CSS alla classe:

.photo { 
    transition: transform 0.25s linear; 
} 

Dimostrazione: http://jsbin.com/iqoreg/1/edit