छवि घुमाएँ जावास्क्रिप्ट पर क्लिक करें

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

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

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

CSS रोटेट ()

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

आइए रोटेट () फ़ंक्शन के सिंटैक्स को देखें:

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

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

जैसे ही आप पृष्ठ को प्रस्तुत करते हैं एक HTML घुमाव दिखाई देता है, इसलिए कोई दृश्य घूर्णन नहीं होता है। रोटेशन को क्रिया में देखने के लिए, आपको CSS ट्रांज़िशन का उपयोग करना होगा। जब कोई क्रिया की जाती है, तो संक्रमण तत्व की स्थिति को बदल देता है, जैसे कि जब कोई कर्सर किसी तत्व पर होवर करता है।