CSS से एलिमेंट्स को घुमाना

CSS rotate() फंक्शन एक एलिमेंट को एक निश्चित संख्या में डिग्री से तिरछा करता है। आप एक पॉजिटिव संख्या में डिग्री का उपयोग करके एलिमेंट को क्लॉकवाइज घुमा सकते हैं। या, आप एक नेगेटिव संख्या का उपयोग करके एलिमेंट को एंटी-क्लॉकवाइज घुमा सकते हैं।

आज हम सीखेंगे कि CSS से एलिमेंट्स को कैसे घुमाया जाए। हमें एलिमेंट को क्यों घुमाना चाहिए? एलिमेंट्स को घुमाने से आपका वेब पेज अधिक इंटरैक्टिव बनता है। सही ढंग से उपयोग किया जाए, तो एक घूमता हुआ एलिमेंट आपकी साइट के सौंदर्यशास्त्र में इजाफा करेगा।

इस लेख को पढ़ते समय, कृपया साथ वाले रिपॉजिटरी को देखें, ताकि आप अवधारणाओं को एक्शन में देख सकें। एलिमेंट को घुमाना जानना आपके CSS टूलबॉक्स के लिए एक मूल्यवान अतिरिक्त होगा।

CSS rotate()

CSS rotate() फंक्शन आपको एक एलिमेंट को 2D एक्सिस पर घुमाने देता है। rotate() फंक्शन एक आर्गुमेंट स्वीकार करता है: वह कोण जिस पर आप अपने वेब एलिमेंट को घुमाना चाहते हैं। आप एक एलिमेंट को क्लॉकवाइज या काउंटर-क्लॉकवाइज घुमा सकते हैं।

आइए rotate() फंक्शन के सिंटैक्स पर एक नज़र डालते हैं:

transform: rotate(angle);

मान "angle" उन डिग्री की संख्या को दर्शाता है जिनसे एलिमेंट को घुमाना चाहिए। आप एक पॉजिटिव डिग्री नंबर (यानी 45) का उपयोग करके क्लॉकवाइज रोटेट निर्दिष्ट कर सकते हैं। या, आप एक नेगेटिव डिग्री वैल्यू (यानी -39) का उपयोग करके विपरीत दिशा में घुमा सकते हैं।

rotate() फंक्शन किसी भी HTML एलिमेंट पर लागू हो सकता है। उदाहरण के लिए, आप टेक्स्ट के एक पैराग्राफ को घुमा सकते हैं। या आप एक इमेज को घुमा सकते हैं।

एक HTML रोटेट पेज रेंडर होते ही दिखाई देता है इसलिए कोई विजिबल रोटेट नहीं होता। रोटेटिंग को एक्शन में देखने के लिए, आपको CSS ट्रांजिशन का उपयोग करना चाहिए। ट्रांजिशन एक एक्शन लिए जाने पर एलिमेंट की स्थिति को बदलते हैं, जैसे जब कर्सर किसी एलिमेंट पर होवर करता है।

rotate() CSS उदाहरण

आइए आगे बढ़ें और अपना HTML पेज बनाएं जिस पर एक घूमने वाला बॉक्स रखना है। आइए एक बॉक्स को div के रूप में जोड़ें और इसे एक क्लास दें (इसे "rotate" नाम दें)।

<div class="rotate"></div>

अब आइए इसमें कुछ स्टाइलिंग जोड़ें:

div.rotate { width: 50px; height: 50px; background-color: chocolate; }

रिफ्रेश करें। कूल, हमारे पास एक कलर्ड बॉक्स है। इस कलर्ड बॉक्स के साथ, हमारे पास rotate() फंक्शन का उपयोग शुरू करने के लिए वह सब कुछ है जो हमें चाहिए।

अपने बॉक्स को घुमाने के लिए, हमें पहले ट्रांसफॉर्म प्रॉपर्टी पर चर्चा करने की आवश्यकता है।

CSS ट्रांसफॉर्म फंक्शन जैसा कि नाम से पता चलता है, एलिमेंट्स को ट्रांसफॉर्म करता है। उन फंक्शन्स में से एक जिसे हम इस पर लागू कर सकते हैं, वह है rotate()। ट्रांसफॉर्म प्रॉपर्टी कई अन्य फंक्शन्स ले सकती है और ट्रांसफॉर्म के साथ हम कई चीजें कर सकते हैं। रोटेट उनमें से सिर्फ एक है।

रोटेट फंक्शन एक एलिमेंट को मूव करता है। यह एक आर्गुमेंट लेता है: वह डिग्री की संख्या जिससे हम एलिमेंट को तिरछा करना चाहते हैं। आइए आगे बढ़ें और 35-डिग्री पॉजिटिव रोटेशन लागू करें:

div.rotate { width: 50px; height: 50px; background-color: chocolate; transform: rotate(35deg); }

हमने अपना बॉक्स घुमाया! अपनी पीठ थपथपाएं।

CSS ट्रांसफॉर्म rotate() फंक्शन कब उपयोग करें

रोटेट फैंसी UI आइडियाज या घूमने वाली इमेजेज की अनुमति देता है। उदाहरण के लिए, आप एक इमेज को 180 डिग्री घुमा सकते हैं। यदि आपको उस घुमाई गई इमेज की कहीं और आवश्यकता है तो बस इसे सेव करें और तदनुसार उपयोग करें।

एक और चीज जिसे आप घुमा सकते हैं वह है टेक्स्ट। मान लीजिए आप एक लेआउट बना रहे हैं जो एक मैगज़ीन की नकल करता है, आप वास्तव में टेक्स्ट एलिमेंट्स पर जोर देने के लिए टेक्स्ट को घुमा सकते हैं।

और rotate() के साथ आप बस इतना ही नहीं कर सकते। रोटेट फंक्शन हमें कुछ वास्तव में कूल एनिमेशन करने की अनुमति देता है!

आइए आगे बढ़ें और अपने div पर CSS :hover सेलेक्टर का उपयोग करके वास्तव में एक अच्छा रोटेशन इफेक्ट लागू करें:

.rotate:hover { transform: rotate(35deg); background-color: deeppink; }

क्या यह कूल नहीं है? 😆

जब हम माउस से इस पर होवर करते हैं तो हमारा बॉक्स घूमता है। हम अपने बॉक्स का कलर बदलने के लिए background-color CSS प्रॉपर्टी का उपयोग करते हैं जब हम इस पर होवर करते हैं।

निष्कर्ष

CSS rotate() फंक्शन एक वेब एलिमेंट को एक कोण पर दिखाता है। यह फंक्शन एक आर्गुमेंट स्वीकार करता है: वह डिग्री की संख्या जिससे एलिमेंट को घुमाया जाना चाहिए। आप या तो एक पॉजिटिव या नेगेटिव डिग्री वैल्यू निर्दिष्ट कर सकते हैं।

एलिमेंट्स को घुमाने से आप अपने वेब पेजों को अधिक सौंदर्य की दृष्टि से मनभावन बना सकते हैं। उदाहरण के लिए, आप एक बॉक्स पर रोटेट लागू कर सकते हैं जब यूज़र अपने कर्सर से इस पर होवर करता है। या आप एक लिंक को घुमाने का निर्णय ले सकते हैं जब यूज़र अपने माउस से इस पर होवर करता है। यह आप पर निर्भर है कि आप इस कौशल का उपयोग कैसे करते हैं!

क्या आप CSS के बारे में अधिक जानने में रुचि रखते हैं? एक्सपर्ट सलाह और शीर्ष शिक्षण संसाधनों पर मार्गदर्शन के लिए हमारा पूरा CSS सीखने का गाइड देखें।