HTML DOM Style transformOrigin गुणधर्म

HTML DOM style transformOrigin गुणधर्म किसी HTML दस्तावेज़ में एक तत्व पर 2D या 3D ट्रांसफ़ॉर्मेशन लागू करने का स्थान निर्धारित करता है और उसे लौटाता है।

वाक्य रचना (Syntax)

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

transformOrigin लौटाना

object.style.transformOrigin

transformOrigin संशोधित करना

object.style.transformOrigin = "value"

मान (Values)

यहाँ मान निम्न हो सकते हैं:

मान	व्याख्या
inherit	यह अपने पैरेंट तत्व से इस गुणधर्म का मान विरासत में लेता है।
initial	यह इस गुणधर्म के मान को उसके डिफ़ॉल्ट मान पर सेट करता है।
x-axis y-axis z-axis	यह क्रमशः x-अक्ष, y-अक्ष और z-अक्ष पर व्यू के स्थान को सेट करता है।

उदाहरण

आइए HTML DOM style transformOrigin गुणधर्म का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> 
    body { 
        color: #000; 
        background: lightblue; 
        height: 100vh; 
        text-align: center; 
    } 
    .box { 
        background: lightcoral; 
        width: 200px; 
        height: 200px; 
        margin: 2rem auto; 
    } 
    .btn { 
        background: #db133a; 
        border: none; 
        height: 2rem; 
        border-radius: 2px; 
        width: 40%; 
        display: block; 
        color: #fff; 
        outline: none; 
        cursor: pointer; 
        margin: 1rem auto; 
    } 
</style> </head> <body> 
<h1>DOM Style transformOrigin गुणधर्म उदाहरण</h1> 
<div class="box"> </div> 
<button onclick="add()" class="btn">transformOrigin बदलें</button> 
<script> 
    function add() { 
        document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)"; 
        document.querySelector('.box').style.transformOrigin = "0 0"; 
    } 
</script> </body> </html>

आउटपुट

यह निम्न आउटपुट उत्पन्न करेगा:

HTML DOM Style transformOrigin गुणधर्म

"transformOrigin बदलें" बटन पर क्लिक करके लाल बॉक्स के ट्रांसफ़ॉर्मेशन का मूल बिंदु बदलें।

HTML DOM Style transformOrigin गुणधर्म