CSS3 शुद्ध सीएसएस का उपयोग करके क्लिक पर रूपांतरण करें

उपयोगकर्ता इंटरैक्शन को बढ़ाने के प्रयास में, आपको CSS3 का उपयोग करके क्लिक पर एक तत्व को बदलने की आवश्यकता का सामना करना पड़ सकता है। विशेष रूप से, क्रॉस चिह्न बनाने के लिए किसी छवि को घुमाना एक सामान्य कार्य है। जबकि होवरिंग परिवर्तन के लिए एक सामान्य ट्रिगर है, यह आलेख विशेष रूप से सीएसएस के माध्यम से ऑनक्लिक इवेंट का उपयोग करने की संभावना का पता लगाता है।

प्रारंभ में, प्रदान किया गया कोड छवि को 45 डिग्री तक घुमाने के लिए होवर इवेंट का उपयोग करता है। हालाँकि, क्लिक पर परिवर्तन को ट्रिगर करने के लिए, एक संशोधन की आवश्यकता होती है। इस छद्म वर्ग का लाभ उठाकर, आप वांछित व्यवहार प्राप्त कर सकते हैं:

.crossRotate:active { परिवर्तन: घुमाएँ(45डिग्री); -वेबकिट-परिवर्तन: घुमाएँ(45डिग्री); -एमएस-परिवर्तन: घुमाएँ(45डिग्री); }

यह कोड क्लिक करने पर छवि को 45 डिग्री तक घुमा देगा। हालाँकि, यह ध्यान रखना महत्वपूर्ण है कि क्लिक जारी होते ही परिवर्तन गायब हो जाएगा। ऐसा इसलिए है क्योंकि :active स्थिति केवल क्लिक के दौरान ही सक्रिय होती है।

.crossRotate:active {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

यदि आप चाहते हैं कि क्लिक के बाद भी परिवर्तन जारी रहे, तो आपको जावास्क्रिप्ट का उपयोग करना होगा। JQuery का उपयोग करके क्लिक इवेंट को कैप्चर करके, आप css() विधि का उपयोग करके परिवर्तन को टॉगल कर सकते हैं:

$( ".crossRotate").click(function() { यदि ($(यह ).css('रूपांतरण' ) == 'कोई नहीं' ){ $(this).css('transform','rotate(45deg)'); } अन्य { $(यह).css('रूपांतरण',''' ); } });

इस कोड में, ट्रांसफॉर्म प्रॉपर्टी की जांच की जाती है। यदि इसे किसी पर सेट नहीं किया जाता है, तो परिवर्तन लागू किया जाता है, अन्यथा इसे हटा दिया जाता है। यह आपको प्रत्येक क्लिक के साथ क्रॉस सिंबल को चालू और बंद करने की अनुमति देता है।

$( ".crossRotate" ).click(function() {
  if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(45deg)");
  } else {
    $(this).css("transform","" );
  }
});