CSS एनिमेशन के साथ transform प्रॉपर्टी को एनिमेट करें

CSS में transform प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह 2D/3D ट्रांसफॉर्मेशन (घुमाव, स्केलिंग, स्थानांतरण, तिरछा) को एनिमेट करता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div { 
        margin: auto; 
        border: 2px solid blue; 
        width: 300px; 
        height: 400px; 
        background-color: orange; 
        animation: myanim 3s; 
      } 
      @keyframes myanim { 
        30% { 
          transform: rotate(120deg); 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1></h1> 
    <div> 
      <h1>डेमो</h1> 
    </div> 
  </body> 
</html>

व्याख्या: डिव प्रारंभ में अनघुमाया हुआ है। एनिमेशन के 30% पर transform: rotate(120deg) घड़ी की दिशा में 120 डिग्री घुमा देता है। transform में translate(), scale(), skew(), rotate3d() आदि शामिल हो सकते हैं। एनिमेशन 3 सेकंड में एक बार चलता है।