होवर-एक्टिवेटेड इमेज स्पिन

अपने वेब पेजों में गतिशील व्यवहार को शामिल करना, जैसे होवर पर छवि रोटेशन, उपयोगकर्ता जुड़ाव को बढ़ा सकता है। गोलाकार बॉर्डर वाली छवि पर सीएसएस के साथ इस प्रभाव को प्राप्त करने के लिए, इन चरणों का पालन करें:

1. CSS3 ट्रांज़िशन के साथ रोटेट()

होवर पर छवि को सुचारू रूप से घुमाने के लिए CSS3 ट्रांज़िशन का उपयोग करें। ट्रांज़िशन प्रॉपर्टी एनीमेशन के लिए अवधि और सहजता फ़ंक्शन को परिभाषित करती है। इस मामले में, हम संक्रमण अवधि को 0.7 सेकंड पर सेट करते हैं और एक ईज-इन-आउट ईज़िंग फ़ंक्शन निर्दिष्ट करते हैं।

img {
  transition: transform .7s ease-in-out;
}

2. होवर ट्रांसफॉर्मेशन

होवर पर छवि को घुमाने के लिए, हम रोटेशन के वांछित कोण को सेट करने के लिए रोटेट() फ़ंक्शन के साथ ट्रांसफॉर्म प्रॉपर्टी का उपयोग करते हैं। इस उदाहरण में, हम छवि को 360 डिग्री घुमाते हैं।

img:hover {
  transform: rotate(360deg);
}

3. HTML कार्यान्वयन

अपने HTML कोड के भीतर, उचित स्रोत और आकार के साथ एक छवि तत्व रखें।

नमूना कोड

यहां घूमती छवि प्रभाव को प्रदर्शित करने वाला एक संपूर्ण कोड नमूना है:

img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}

इस कोड के साथ, जब भी उपयोगकर्ता छवि, यह 360 डिग्री आसानी से घूमेगी।