CSS perspective-origin प्रॉपर्टी पर एनिमेशन करें

CSS में perspective-origin प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह 3D-ट्रांसफॉर्म किए गए तत्वों के लिए वैनिशिंग पॉइंट (दृष्टिकोण मूल) की स्थिति को बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      #demo1 { 
        position: relative; 
        margin: auto; 
        height: 250px; 
        width: 350px; 
        padding: 10px; 
        border: 2px solid orange; 
        perspective: 125px; 
        animation: myanim 3s infinite; 
      } 
      @keyframes myanim { 
        70% { 
          perspective-origin: 5px 30%; 
        } 
      } 
      #demo2 { 
        padding: 70px; 
        position: absolute; 
        border: 2px solid black; 
        background-color: blue; 
        color: white; 
        transform: rotateX(30deg); 
      } 
    </style> 
  </head> 
  <body> 
    <h1>CSS perspective-origin प्रॉपर्टी</h1> 
    <div id="demo1">यह डेमो टेक्स्ट डिव1 में है। 
      <div id="demo2">यह डेमो टेक्स्ट डिव2 में है।</div> 
    </div> 
  </body> 
</html>

व्याख्या: पैरेंट (#demo1) पर perspective: 125px 3D स्पेस बनाता है। perspective-origin डिफ़ॉल्ट केंद्र (50% 50%) है। एनिमेशन के 70% पर यह 5px 30% (बाएं से 5px, ऊपर से 30%) हो जाता है, जिससे बच्चे (#demo2) का 3D घुमाव परिप्रेक्ष्य बदल जाता है।