एचटीएमएल डोम शैली परिप्रेक्ष्य मूल संपत्ति

<घंटा/>

HTML DOM स्टाइल पर्सपेक्टिवऑरिजिन प्रॉपर्टी वापस आती है और संशोधित करती है जहां एक HTML दस्तावेज़ में x-अक्ष और y-अक्ष पर एक 3D तत्व रखा गया है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

1. रिटर्निंग पर्सपेक्टिवऑरिजिन

object.perspectiveOrigin

2. परिप्रेक्ष्य को संशोधित करनाउत्पत्ति

object.perspectiveOrigin = “value”

यहाँ, मान हो सकता है -

<थेड>

मान	स्पष्टीकरण
प्रारंभिक	इसने इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट किया।
उत्तराधिकारी	यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है।
x-अक्ष y-अक्ष	यहाँ x-अक्ष दर्शाता है कि दृश्य x-अक्ष पर कहाँ स्थित है। y-अक्ष दर्शाता है कि दृश्य y-अक्ष पर कहाँ रखा गया है।

आइए हम HTML DOM स्टाइल पर्सपेक्टिव ऑरिजिन प्रॉपर्टी का एक उदाहरण देखें -

उदाहरण

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      perspective: 100px;
   }
   .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 Property Demo</h1>
<div class='box'></div>
<button class="btn" onclick="set()">Set PerspectiveOrigin</button>
<script>
   function set() {
      document.body.style.perspectiveOrigin = "20% 50%";
   }
</script>
</body>
</html>

आउटपुट

एचटीएमएल डोम शैली परिप्रेक्ष्य मूल संपत्ति

“परिप्रेक्ष्य मूल सेट करें . पर क्लिक करें लाल . के परिप्रेक्ष्य मूल को सेट करने के लिए बटन बॉक्स।

एचटीएमएल डोम शैली परिप्रेक्ष्य मूल संपत्ति