HTML DOM स्टाइल ट्रांसफॉर्मऑरिजिन प्रॉपर्टी लौटाती है और HTML दस्तावेज़ के किसी तत्व में 2D या 3D ट्रांसफ़ॉर्मेशन लागू करती है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
-
रिटर्निंग ट्रांसफॉर्मऑरिजिन
object.style.transformOrigin
-
ट्रांसफॉर्म ऑरिजिन को संशोधित करना
object.style.transformOrigin = “value”
मान
यहाँ, मान हो सकता है -
| मान | स्पष्टीकरण |
|---|---|
| उत्तराधिकारी | यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है। |
| प्रारंभिक | इसने इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट किया। |
| x-अक्ष y-अक्ष z-अक्ष | यह सेट करता है कि दृश्य क्रमशः x-अक्ष, y-अक्ष और z-अक्ष के अनुदिश कहाँ स्थित है। |
उदाहरण
आइए हम HTML DOM स्टाइल ट्रांसफॉर्म ऑरिजिन प्रॉपर्टी का एक उदाहरण देखें -
<!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 Property Example</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">Change 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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
"ट्रांसफॉर्म ऑरिजिन बदलें . पर क्लिक करें लाल बॉक्स के लिए परिवर्तन की उत्पत्ति को बदलने के लिए बटन।
