शैली परिवर्तन संपत्ति
उदाहरण
एक div तत्व घुमाएँ:
document.getElementById("myDIV").style.transform = "rotate(7deg)";
परिभाषा और उपयोग
परिवर्तन गुण किसी तत्व के लिए 2D या 3D परिवर्तन लागू करता है। यह संपत्ति आपको तत्वों को घुमाने, स्केल करने, स्थानांतरित करने, तिरछा करने आदि की अनुमति देती है।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
transform | 36.0 | 10.0 9.0 msTransform |
16.0 | 9.0 | 23.0 |
वाक्य - विन्यास
परिवर्तन संपत्ति लौटाएं:
object.style.transform
परिवर्तन संपत्ति सेट करें:
object.style.transform = "none|transform-functions|initial|inherit"
सम्पत्ति की कीमत
Value | Description |
---|---|
none | Defines that there should be no transformation |
matrix(n, n, n, n, n, n) | Defines a 2D transformation, using a matrix of six values |
matrix3d(n, n, n, n, etc....) | Defines a 3D transformation, using a 4x4 matrix of 16 values |
translate(x, y) | Defines a 2D translation |
translate3d(x, y, z) | Defines a 3D translation |
translateX(x) | Defines a translation, using only the value for the X-axis |
translateY(y) | Defines a translation, using only the value for the Y-axis |
translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
scale(x, y) | Defines a 2D scale transformation |
scale3d(x, y, z) | Defines a 3D scale transformation |
scaleX(x) | Defines a scale transformation by giving a value for the X-axis |
scaleY(y) | Defines a scale transformation by giving a value for the Y-axis |
scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
rotate3d(x, y, z, angle) | Defines a 3D rotation |
rotateX(angle) | Defines a 3D rotation along the X-axis |
rotateY(angle) | Defines a 3D rotation along the Y-axis |
rotateZ(angle) | Defines a 3D rotation along the Z-axis |
skew(x-angle, y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
skewX(angle) | Defines a 2D skew transformation along the X-axis |
skewY(angle) | Defines a 2D skew transformation along the Y-axis |
perspective(n) | Defines a perspective view for a 3D transformed element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
टेक्निकल डिटेल
डिफ़ॉल्ट मान: | कोई नहीं |
---|---|
प्रतिलाभ की मात्रा: | एक स्ट्रिंग, एक तत्व की परिवर्तन संपत्ति का प्रतिनिधित्व करता है |
सीएसएस संस्करण | CSS3 |
संबंधित पृष्ठ
सीएसएस संदर्भ: संपत्ति को बदलना
❮ स्टाइल ऑब्जेक्ट