Wie kann ich ein Bild mit CSS per Zufallsauswahl drehen?

Question

Ich habe eine Galerie von 20 Bildern auf meiner Webseite, die ich beim Schweben über jedes Bild um einen zufälligen Betrag (-5 bis 5 Grad) drehen möchte. Wenn möglich, würde ich nur CSS verwenden. Wenn nicht, wäre ich offen für die Verwendung von JavaScript oder jQuery.

Meine CSS ist wie folgt:

.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 sollte eine Zufallszahl sein, so dass jedes Mal, wenn der Benutzer auf ein Bild schwebt, es um einen zufälligen Betrag rotiert zwischen -5 und 5. Kann ich einen Anruf JavaScript-Funktion aus dem CSS oder sogar eine JavaScript-Variable? Das wäre besser als 20 verschiedene CSS-IDs zu erstellen.

Wie kann ich das erreichen? Vielen Dank!

Answer 1

Sie werden keine separaten CSS-IDs benötigen, aber Sie könnten jQuery für die Klasse verwenden. .each() wird hier direkt anstelle von .css() verwendet, da sonst der Zufallswinkel einmal erzeugt und für alle Bilder verwendet würde. So drehen individally auf schweben:

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

Wenn Sie diese Transformationen glatt animieren möchten, können Sie einfach eine transform CSS-Eigenschaft der Klasse hinzufügen:

.photo { 
    transition: transform 0.25s linear; 
} 

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