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

CSS में perspective प्रॉपर्टी पर एनिमेशन लागू करने का तरीका यहां दिखाया गया है। यह 3D-ट्रांसफॉर्म किए गए बच्चे तत्वों के लिए दृष्टिकोण दूरी को बदलता है, जिससे गहराई प्रभाव बदलता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      #demo1 { 
        position: relative; 
        margin-left: 120px; 
        height: 250px; 
        width: 350px; 
        padding: 10px; 
        border: 1px solid orange; 
        animation: myanim 3s infinite; 
        perspective: 200px; 
      } 
      @keyframes myanim { 
        50% { 
          perspective: 100px; 
        } 
      } 
      #demo2 { 
        padding: 90px; 
        position: absolute; 
        border: 1px solid black; 
        background-color: orange; 
        transform: rotateX(60deg); 
      } 
    </style> 
  </head> 
  <body> 
    <div id="demo1">यह डेमो टेक्स्ट डिव1 में है। 
      <div id="demo2">यह डेमो टेक्स्ट डिव2 में है।</div> 
    </div> 
  </body> 
</html>

व्याख्या: पैरेंट पर perspective: 200px सेट है। एनिमेशन के 50% पर यह 100px हो जाता है (कम दूरी = अधिक स्पष्ट 3D प्रभाव)। बच्चा rotateX(60deg) के साथ X-अक्ष पर घुमाया गया है। परिप्रेक्ष्य बदलने से बच्चे का आभासी आकार/विकृति बदल जाती है।