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

परिचय

HTML DOM Style perspectiveOrigin प्रॉपर्टी HTML दस्तावेज़ में 3D एलिमेंट को x-अक्ष और y-अक्ष पर कहां रखा गया है, यह परिभाषित करती है। यह दर्शक के दृष्टिकोण (व्यू पॉइंट) को निर्धारित करती है।

सिंटैक्स

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

object.style.perspectiveOrigin

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

object.style.perspectiveOrigin = "value"

मान

उदाहरण

इस उदाहरण में, एक लाल बॉक्स पर transform: rotateX(25deg) लागू है और बॉडी पर perspective: 100px है। जब "Set PerspectiveOrigin" बटन पर क्लिक किया जाता है, तो पर्सपेक्टिव ओरिजिन को 20% 50% (बाएं से 20%, ऊपर से 50%) पर सेट किया जाता है।

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    perspective: 100px;
    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 perspectiveOrigin प्रॉपर्टी डेमो</h1>
<div class='box'></div>
<button class="btn" onclick="setPerspectiveOrigin()">Perspective Origin सेट करें</button>
<script>
  function setPerspectiveOrigin() {
    document.body.style.perspectiveOrigin = "20% 50%";
  }
</script>
</body>
</html>

आउटपुट

शुरुआत में 3D बॉक्स केंद्र से देखा जाता है (डिफ़ॉल्ट 50% 50%)। "Perspective Origin सेट करें" बटन पर क्लिक करने पर, व्यू पॉइंट बाएं तरफ चला जाता है, जिससे बॉक्स का 3D प्रभाव बदल जाता है।

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

• perspective प्रॉपर्टी पैरेंट एलिमेंट पर सेट होनी चाहिए
• perspectiveOrigin भी पैरेंट पर सेट होती है
• यह 3D ट्रांसफॉर्म किए गए चाइल्ड एलिमेंट्स के दिखने के तरीके को प्रभावित करती है
• डिफ़ॉल्ट मान 50% 50% (केंद्र) है

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

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