HTML DOM शैली संपत्ति रिटर्न को रूपांतरित करती है और एक HTML दस्तावेज़ में एक तत्व में 2D या 3D परिवर्तन लागू करती है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
-
रिटर्निंग ट्रांसफॉर्म
object.style.transform
-
परिवर्तन को संशोधित करना
object.style.transform = “value”
मान
यहाँ, मान हो सकता है -
| Value <वें शैली ="चौड़ाई:79.3877%; पाठ-संरेखण:केंद्र;">स्पष्टीकरण | |
|---|---|
| विरासत में मिलता है | यह इस संपत्ति मूल्य को अपने मूल तत्व से प्राप्त करता है। |
| प्रारंभिक | इसने इस गुण मान को इसके डिफ़ॉल्ट मान पर सेट किया। |
| कोई नहीं | यह कोई परिवर्तन नहीं करता है। |
| ट्रांसफॉर्म-फंक्शन | यह कोई भी मान्य 2D या 3D रूपांतरण फ़ंक्शन हो सकता है। |
| ऊर्ध्वाधर | यह तत्व की ऊंचाई को आकार बदलने योग्य के रूप में सेट करता है। |
कार्य
यहाँ मान्य 2D या 3D रूपांतरण कार्य हैं -
| Function <वें शैली ="पाठ-संरेखण:केंद्र;">स्पष्टीकरण | |
|---|---|
| मैट्रिक्स(n,n,n,n,n,n) | यह 6 मानों के मैट्रिक्स का उपयोग करके 2D रूपांतरण निर्दिष्ट करता है। |
| matrix3d(n,n,n,n,etc...) | यह 16 मानों के मैट्रिक्स का उपयोग करके 3D रूपांतरण निर्दिष्ट करता है। |
| अनुवाद करें(x,y) | यह एक 2D अनुवाद निर्दिष्ट करता है। |
| translate3d(x,y,z) | यह एक 3D अनुवाद निर्दिष्ट करता है। |
| अनुवादX(x) | यह केवल X-अक्ष मान का उपयोग करके अनुवाद निर्दिष्ट करता है। |
| अनुवादY(y) | यह केवल Y-अक्ष मान का उपयोग करके अनुवाद निर्दिष्ट करता है। |
| translateZ(z) | यह केवल Z-अक्ष मान का उपयोग करके अनुवाद निर्दिष्ट करता है। |
| स्केल(x,y) | यह एक 2D स्केल निर्दिष्ट करता है। |
| scale3d(x,y,z) | यह एक 3D स्केल निर्दिष्ट करता है। |
| स्केलएक्स(x) | यह केवल X-अक्ष मान का उपयोग करके एक पैमाना निर्दिष्ट करता है। |
| स्केलY(y) | यह केवल Y-अक्ष मान का उपयोग करके एक पैमाना निर्दिष्ट करता है। |
| स्केलजेड(जेड) | यह केवल Z-अक्ष मान का उपयोग करके एक पैमाना निर्दिष्ट करता है। |
| घुमाएँ(कोण) | यह एक 2D घुमाव निर्दिष्ट करता है। |
| rotate3d(x,y,z) | यह एक 3D घुमाव निर्दिष्ट करता है। |
| रोटेटX(x) | यह केवल X मान का उपयोग करके रोटेट को निर्दिष्ट करता है। |
| घुमाएँY(y) | यह केवल Y-अक्ष मान का उपयोग करके घुमाने को निर्दिष्ट करता है। |
| रोटेटZ(z) | यह केवल Z-अक्ष मान का उपयोग करके घुमाने को निर्दिष्ट करता है। |
| तिरछा(x,y) | यह एक 2D तिरछा निर्दिष्ट करता है। |
| स्केवएक्स(x) | यह केवल X-अक्ष मान का उपयोग करके एक तिरछा निर्दिष्ट करता है। |
| तिरछा (y) | यह केवल Y-अक्ष मान का उपयोग करके एक तिरछा निर्दिष्ट करता है। |
| परिप्रेक्ष्य(एन) | यह 3D रूपांतरण के लिए एक परिप्रेक्ष्य दृश्य निर्दिष्ट करता है। |
उदाहरण
आइए 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 transform Property Example</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">Set transform</button>
<script>
function add() {
document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
"रूपांतरण सेट करें . पर क्लिक करें लाल बॉक्स पर 2डी ट्रांसफ़ॉर्मेशन लागू करने के लिए बटन।
