HTML DOM style transform गुणधर्म किसी HTML दस्तावेज़ में एक तत्व पर 2D या 3D ट्रांसफ़ॉर्मेशन लागू करता है और उसे लौटाता है।
वाक्य रचना (Syntax)
निम्नलिखित वाक्य रचना है:
transform लौटाना
object.style.transform
transform संशोधित करना
object.style.transform = "value"
मान (Values)
यहाँ मान निम्न हो सकते हैं:
| मान | व्याख्या |
|---|---|
| inherit | यह अपने पैरेंट तत्व से इस गुणधर्म का मान विरासत में लेता है। |
| initial | यह इस गुणधर्म के मान को उसके डिफ़ॉल्ट मान पर सेट करता है। |
| none | यह कोई ट्रांसफ़ॉर्मेशन सेट नहीं करता। |
| transform-function | यह कोई भी वैध 2D या 3D ट्रांसफ़ॉर्मेशन फ़ंक्शन हो सकता है। |
| vertical | यह तत्व की ऊंचाई को रिसाइज़ेबल के रूप में सेट करता है। |
फ़ंक्शन्स (Functions)
यहाँ वैध 2D या 3D ट्रांसफ़ॉर्मेशन फ़ंक्शन्स हैं:
| फ़ंक्शन | व्याख्या |
|---|---|
| matrix(n,n,n,n,n,n) | यह 6 मानों के मैट्रिक्स का उपयोग करके 2D ट्रांसफ़ॉर्मेशन निर्दिष्ट करता है। |
| matrix3d(n,n,n,n,etc ...) | यह 16 मानों के मैट्रिक्स का उपयोग करके 3D ट्रांसफ़ॉर्मेशन निर्दिष्ट करता है। |
| translate(x,y) | यह 2D ट्रांसलेशन निर्दिष्ट करता है। |
| translate3d(x,y,z) | यह 3D ट्रांसलेशन निर्दिष्ट करता है। |
| translateX(x) | यह केवल X-अक्ष मान का उपयोग करके ट्रांसलेशन निर्दिष्ट करता है। |
| translateY(y) | यह केवल Y-अक्ष मान का उपयोग करके ट्रांसलेशन निर्दिष्ट करता है। |
| translateZ(z) | यह केवल Z-अक्ष मान का उपयोग करके ट्रांसलेशन निर्दिष्ट करता है। |
| scale(x,y) | यह 2D स्केल निर्दिष्ट करता है। |
| scale3d(x,y,z) | यह 3D स्केल निर्दिष्ट करता है। |
| scaleX(x) | यह केवल X-अक्ष मान का उपयोग करके स्केल निर्दिष्ट करता है। |
| scaleY(y) | यह केवल Y-अक्ष मान का उपयोग करके स्केल निर्दिष्ट करता है। |
| scaleZ(z) | यह केवल Z-अक्ष मान का उपयोग करके स्केल निर्दिष्ट करता है। |
| rotate(angle) | यह 2D रोटेशन निर्दिष्ट करता है। |
| rotate3d(x,y,z) | यह 3D रोटेशन निर्दिष्ट करता है। |
| rotateX(x) | यह केवल X मान का उपयोग करके रोटेशन निर्दिष्ट करता है। |
| rotateY(y) | यह केवल Y-अक्ष मान का उपयोग करके रोटेशन निर्दिष्ट करता है। |
| rotateZ(z) | यह केवल Z-अक्ष मान का उपयोग करके रोटेशन निर्दिष्ट करता है। |
| skew(x,y) | यह 2D स्क्यू निर्दिष्ट करता है। |
| skewX(x) | यह केवल X-अक्ष मान का उपयोग करके स्क्यू निर्दिष्ट करता है। |
| skewY(y) | यह केवल Y-अक्ष मान का उपयोग करके स्क्यू निर्दिष्ट करता है। |
| perspective(n) | यह 3D ट्रांसफ़ॉर्मेशन के लिए पर्सपेक्टिव व्यू निर्दिष्ट करता है। |
उदाहरण
आइए HTML DOM style transform गुणधर्म का एक उदाहरण देखें:
<!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 गुणधर्म उदाहरण</h1>
<div class="box"> </div>
<button onclick="add()" class="btn">transform सेट करें</button>
<script>
function add() {
document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
}
</script> </body> </html>
आउटपुट
यह निम्न आउटपुट उत्पन्न करेगा:
"transform सेट करें" बटन पर क्लिक करके लाल बॉक्स पर 2D ट्रांसफ़ॉर्मेशन लागू करें।
