सीएसएस के साथ तत्वों को घुमाना

सीएसएस रोटेट () फ़ंक्शन किसी तत्व को डिग्री की एक निश्चित संख्या से तिरछा करता है। आप धनात्मक संख्या में डिग्री का उपयोग करके किसी तत्व को दक्षिणावर्त घुमा सकते हैं। या, आप किसी तत्व को ऋणात्मक संख्या का उपयोग करके घड़ी की विपरीत दिशा में घुमा सकते हैं।

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

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

CSS रोटेट ()

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

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

मान "कोण" तत्व को घुमाए जाने की डिग्री की संख्या का प्रतिनिधित्व करता है। आप एक सकारात्मक डिग्री संख्या (अर्थात 45) का उपयोग करके दक्षिणावर्त घुमाने को निर्दिष्ट कर सकते हैं। या, आप नकारात्मक डिग्री मान (यानी -39) का उपयोग करके विपरीत दिशा में घुमा सकते हैं।

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

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

घुमाएं() CSS उदाहरण

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

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

div.rotate {चौड़ाई:50px; ऊंचाई:50 पीएक्स; पृष्ठभूमि-रंग:चॉकलेट;}

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

हमारे बॉक्स को घुमाने के लिए, हमें पहले ट्रांसफॉर्म प्रॉपर्टी पर चर्चा करनी होगी।

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

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

div.rotate {चौड़ाई:50px; ऊंचाई:50 पीएक्स; पृष्ठभूमि-रंग:चॉकलेट; ट्रांसफॉर्म:रोटेट (35 डिग्री); } 

 हमने अपना बक्सा घुमाया! अपने आप को पीठ पर टैप करें।
  
सीएसएस ट्रांसफॉर्म रोटेट () फ़ंक्शन का उपयोग कब करें 
 

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

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

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

 चलिए आगे बढ़ते हैं और CSS का उपयोग करते हैं:हमारे div पर होवर चयनकर्ता वास्तव में एक अच्छा रोटेशन प्रभाव लागू करने के लिए:
 <पूर्व>। घुमाएँ:होवर {रूपांतरण:घुमाएँ (35 डिग्री); पृष्ठभूमि-रंग:गहरा गुलाबी;}

क्या यह अच्छा नहीं है? 😎

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

निष्कर्ष

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

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

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