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

CSS में transform-origin प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह ट्रांसफॉर्मेशन (घुमाव, स्केलिंग, आदि) के लिए मूल बिंदु को बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      #demo1 { 
        position: relative; 
        height: 300px; 
        width: 400px; 
        border: 2px solid black; 
        margin: 100px; 
        padding: 5px; 
      } 
      #demo2 { 
        padding: 30px; 
        position: absolute; 
        border: 1px solid black; 
        background-color: orange; 
        transform: rotate(45deg); 
        transform-origin: 30% 10%; 
        animation: mymove 3s infinite; 
      } 
      @keyframes mymove { 
        30% { 
          transform-origin: 0 0 0; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS transform-origin प्रॉपर्टी</h1> 
    <div id="demo1"> 
      <div id="demo2">डेमो</div> 
    </div> 
  </body> 
</html>

व्याख्या: आंतरिक डिव (#demo2) 45 डिग्री घुमाया गया है। प्रारंभिक transform-origin: 30% 10% (बाएं से 30%, ऊपर से 10%) है। एनिमेशन के 30% पर यह 0 0 0 (ऊपरी-बायां कोना) हो जाता है, जिससे घुमाव का केंद्र बदल जाता है। तीसरा मान Z-अक्ष ऑफसेट है।