Görüntüyü CSS kullanarak rasgele bir miktarda nasıl döndürürün?

Question

Web sayfamda, her bir resmin üzerine geldikten sonra rastgele bir miktarda (-5 ila 5 derece) dönmek istediğim 20 resim galerisi var. Mümkünse sadece CSS kullanmak istiyorum. Değilse, JavaScript veya jQuery'yi kullanmaya açık olacağım.

.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 rastgele bir sayı, yani kullanıcı bir görüntünün üzerine geldiğinde her zaman olmalı o -5 arasında rasgele miktarda döner ve 5. Bir arar, şu şekildedir:

Benim CSS JavaScript işlevi CSS'den veya hatta bir JavaScript değişkeninden mi? Bu, 20 farklı CSS kimliğinin oluşturulmasından daha iyi olurdu.

Bunu nasıl yapabilirim? Teşekkürler!

Answer 1

Ayrı CSS Kimliğine ihtiyacınız yoktur, ancak sınıfa bazı jQuery kullanabilirsiniz. .each(), doğrudan burada .css() yerine kullanılır çünkü aksi takdirde rasgele açı bir kez oluşturulur ve tüm resimler için kullanılır. Üzerine giderek individally döndürmek için: sorunsuz bu dönüşümleri animasyon istiyorsanız

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

, sadece sınıfa bir transform CSS özelliği ekleyebilirsiniz:

.photo { 
    transition: transform 0.25s linear; 
} 

Gösteri: http://jsbin.com/iqoreg/1/edit