HTML DOM Style perspective प्रॉपर्टी

परिचय

HTML DOM Style perspective प्रॉपर्टी HTML दस्तावेज़ में 3D एलिमेंट्स को कैसे देखा जाता है, यह निर्धारित करती है। यह दर्शक और z=0 प्लेन के बीच की दूरी को परिभाषित करती है, जिससे 3D गहराई का आभास होता है।

सिंटैक्स

1. perspective मान प्राप्त करना

object.style.perspective

2. perspective मान सेट करना

object.style.perspective = "value"

मान

उदाहरण

इस उदाहरण में, एक लाल बॉक्स पर transform: rotateX(25deg) लागू है। जब "Set Perspective" बटन पर क्लिक किया जाता है, तो बॉडी पर perspective: 100px सेट किया जाता है, जिससे बॉक्स का 3D प्रभाव दिखाई देने लगता है।

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .box {
    text-align: center;
    width: 200px;
    height: 200px;
    background-color: #db133a;
    transform: rotateX(25deg);
    margin: 2rem auto;
  }
</style>
<body>
<h1 style="text-align:center">DOM Style perspective प्रॉपर्टी डेमो</h1>
<div class='box'></div>
<button class="btn" onclick="setPerspective()">Perspective सेट करें</button>
<script>
  function setPerspective() {
    document.body.style.perspective = "100px";
  }
</script>
</body>
</html>

आउटपुट

शुरुआत में (perspective के बिना) लाल बॉक्स फ्लैट दिखाई देता है। "Perspective सेट करें" बटन पर क्लिक करने पर, बॉक्स में 3D गहराई दिखाई देने लगती है क्योंकि अब दर्शक से दूरी परिभाषित हो गई है।

महत्वपूर्ण बिंदु

• perspective पैरेंट एलिमेंट पर लागू होती है, चाइल्ड पर नहीं
• छोटे मान (जैसे 100px) = अधिक तीव्र 3D प्रभाव
• बड़े मान (जैसे 1000px) = सूक्ष्म 3D प्रभाव
• perspectiveOrigin के साथ संयोजन में उपयोग करें
• यह केवल 3D ट्रांसफॉर्म किए गए चाइल्ड एलिमेंट्स को प्रभावित करती है

perspective vs perspective()

• perspective (प्रॉपर्टी): पैरेंट पर लागू, सभी 3D चाइल्ड्स को प्रभावित करती है
• transform: perspective() (फंक्शन): सिंगल एलिमेंट पर लागू, केवल उस एलिमेंट को प्रभावित करता है

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़रों में समर्थित (IE10+ के लिए प्रीफिक्स के साथ)।