कैसे एक यादृच्छिक राशि सीएसएस का उपयोग करके एक छवि को घुमाने के लिए?

Question

मेरे पास मेरे वेब पेज पर 20 छवियों की एक गैलरी है जो मैं प्रत्येक छवि पर होवर पर यादृच्छिक राशि (-5 से 5 डिग्री) तक घूमना चाहता हूं। यदि संभव हो, तो मैं सिर्फ सीएसएस का उपयोग करना चाहता हूं। यदि नहीं, तो मैं जावास्क्रिप्ट या jQuery का उपयोग करने के लिए खुला होगा।

.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 एक यादृच्छिक संख्या है, तो हर बार उपयोगकर्ता एक छवि पर घूमता होना चाहिए यह के बीच एक यादृच्छिक राशि -5 से घूमता है और 5. मैं एक फोन कर सकते हैं,:

मेरे सीएसएस इस प्रकार है सीएसएस के भीतर से जावास्क्रिप्ट फ़ंक्शन, या यहां तक ​​कि एक जावास्क्रिप्ट चर? यह 20 अलग-अलग सीएसएस आईडी बनाने से बेहतर होगा।

मैं यह कैसे पूरा कर सकते हैं? धन्यवाद!

Answer 1

आप अलग सीएसएस आईडी की जरूरत नहीं होगी, लेकिन आप वर्ग पर कुछ jQuery इस्तेमाल कर सकते हैं। .each() सीधे यहाँ .css() के स्थान पर प्रयोग क्योंकि अन्यथा यादृच्छिक कोण एक बार उत्पन्न और छवियों के सभी के लिए इस्तेमाल किया जाएगा है। हॉवर पर individally बारी बारी से करने के लिए:

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

आप आसानी से इन परिवर्तनों चेतन चाहते हैं, तो आप बस एक transform सीएसएस संपत्ति वर्ग के लिए जोड़ सकते हैं:

.photo { 
    transition: transform 0.25s linear; 
} 

प्रदर्शन: http://jsbin.com/iqoreg/1/edit