CSS rotate गुण

परिभाषा और उपयोग

rotate गुण एलीमेंट को घूमाने की अनुमति देता है।

rotate गुण एक वैल्यू को परिभाषित करता है जो एलीमेंट को z अक्ष की ओर प्रतिचक्रीय रूप से घूमाने की स्तर को प्रदर्शित करता है।एलीमेंट को x अक्ष, y अक्ष या अन्य तरीके से घूमाने के लिए, उसके लिए अनुरूप परिभाषा करनी होगी।

rotate गुण का वैल्यू एक कोण, अक्ष नाम + कोण या तीन वैल्यू + कोण हो सकता है।

  • यदि केवल एक कोण दिया गया है, तो एलीमेंट z अक्ष की ओर प्रतिचक्रीय रूप से घूमाया जाएगा।
  • यदि अक्ष नाम + कोण दिए गए हैं, तो एलीमेंट निर्दिष्ट अक्ष की ओर प्रतिचक्रीय रूप से घूमाया जाएगा।
  • यदि तीन वैल्यू + कोण दिए गए हैं, तो इन तीन वैल्यू एक वेक्टर को परिभाषित करते हैं जिसके इर्द्-गिर्द एलीमेंट घूमाया जाएगा।

बेहतर समझने के लिए rotate गुण को देखेंप्रदर्शन。

ध्यान दें:एलीमेंट को घूमाने के लिए एनिमेशन का एक अन्य तकनीक यह है कि इसके साथ CSS रोटेट() फ़ंक्शन का CSS transform गुण

उदाहरण

उदाहरण 1

एलीमेंट के घूमाने को बदलें:

div {
  rotate: 30deg;
}

अपने आप प्रयोग करें

उदाहरण 2

जब rotate वेक्टर और कोण को सेट करने पर, एलीमेंट उस वेक्टर के इर्द्-गिर्द घूमाया जाएगा।

यहाँ, वेक्टर दोमिनियल सतह में [1 1 0] है, जिसमें x और y सतह हैं और फिर 60 डिग्री घूमाया जाता है:

div {
  rotate: 1 1 0 60deg;
}

अपने आप प्रयोग करें

CSS व्याकरण

rotate: axis angle|initial|inherit;

गुण वैल्यू

वैल्यू वर्णन
axis

वैकल्पिक। यदि निर्धारित नहीं होता है, डिफ़ॉल्ट वैल्यू z अक्ष है। एलीमेंट को घूमाने के लिए अक्ष को परिभाषित करता है। संभावित वैल्यू:

  • x
  • y
  • z
angle

एलीमेंट के घूमाने की स्तर को परिभाषित करता है। संभावित इकाइयाँ:

  • deg（डिग्री）
  • rad（अर्कडेंट）
  • turn（चक्कर）
vector angle

तीन संख्या एक वेक्टर को परिभाषित करती हैं जिसके इर्द्-गिर्द एलीमेंट घूमाया जाएगा।

ये तीन संख्या वेक्टर के x, y और z सतह हैं।

आखिरी वैल्यू घूमाने का कोण है।

संभावित वैल्यू:

number number number angle
initial इस गुण को उसके डिफ़ॉल्ट वैल्यू पर सेट करें। देखें initial。
inherit अपने पितृ एलीमेंट से इस गुण को विरासत करें। देखें inherit。

तकनीकी विवरण

डिफ़ॉल्ट वैल्यू: none
विरासतीयता: नहीं
एनिमेशन निर्माण: समर्थन किया गया है। देखें:एनिमेशन संबंधी गुण。
संस्करण: CSS3
जेसक्रिप्ट व्याकरण: object.style.rotate="-120deg"

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम एज फायरफॉक्स सफारी ओपेरा
104 104 72 14.1 90

संबंधित पृष्ठ

ट्यूटोरियल:CSS 2D बदल

ट्यूटोरियल:CSS 3D ट्रांसफॉर्म

संदर्भःCSS scale गुण

संदर्भःCSS ट्रांसलेट प्रभाव