फ़ंक्शन rotate

फ़ंक्शन rotate() तत्व को निर्दिष्ट कोण तक घुमाता है। इसका उपयोग transform गुण के साथ किया जाता है। गुण का मान कोणों की किसी भी इकाई में हो सकता है। सकारात्मक मान घड़ी की दिशा में घुमाता है, नकारात्मक मान घड़ी की विपरीत दिशा में घुमाता है। घूर्णन transform-origin गुण द्वारा निर्धारित बिंदु के चारों ओर किया जाता है।

सिंटैक्स

cssसिलेक्टर {
  transform: rotate(कोण);
}

उदाहरण

इस उदाहरण में ब्लॉक 30 डिग्री से घड़ी की दिशा में घुमाया गया है:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

उदाहरण

इस उदाहरण में ब्लॉक 30 डिग्री से घड़ी की विपरीत दिशा में घुमाया गया है:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: rotate(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

उदाहरण

इस उदाहरण में, होवर करने पर ब्लॉक 1 चक्कर घूमेगा, क्योंकि घूर्णन मान 1turn में दिया गया है (यही प्रभाव 360deg में घूर्णन कोण देकर प्राप्त किया जा सकता है)। घूर्णन की सहजता के लिए transition गुण जोड़ा गया है:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

यह भी देखें