CSS rotate() फ़ंक्शन

CSS में rotate() फ़ंक्शन किसी तत्व को घुमाता है। पैरामीटर घुमाव के कोण को सेट करता है। मान डिग्री, रेडियन, ग्रेड, या टर्न में हो सकते हैं।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      #demo1 { background-color: hsla(140, 100%, 50%, 0.8); } 
      #demo2 { background-color: hsla(130, 100%, 50%, 0.6); } 
      #demo3 { background-color: hsla(190, 100%, 50%, 0.4); } 
      #demo4 { background-color: hsla(170, 100%, 50%, 0.3); } 
      #demo5 { background-color: hsl(150, 100%, 60%); } 
      #demo6 { 
        background-color: rgba(108,111,35,0.6); 
        font-size: 35px; 
        color: yellow; 
        transform: rotate(45deg); 
      } 
    </style> 
  </head> 
  <body> 
    <h1>क्रिकेटर</h1> 
    <p id="demo1">डेविड वार्नर</p> 
    <p id="demo2">स्टीव स्मिथ</p> 
    <p id="demo3">मार्क वॉ</p> 
    <p id="demo4">स्टीव वॉ</p> 
    <p id="demo5">डेविड जॉनसन</p> 
    <p id="demo6">ऑस्ट्रेलियाई क्रिकेटर</p> 
  </body> 
</html>

आउटपुट

व्याख्या: transform: rotate(45deg) अंतिम पैराग्राफ (#demo6) को 45 डिग्री घुमाता है। अन्य पैराग्राफ विभिन्न HSLA रंग दिखाते हैं। rotate() 2D घुमाव है; rotateX(), rotateY(), rotateZ(), rotate3d() 3D घुमाव के लिए हैं।