स्टाइल ट्रांसफॉर्म गुण

विभाषा और उपयोग

transform गुण 2D या 3D ट्रांसफॉर्मेशन एलिमेंट पर लगाता है। यह गुण आपको एलिमेंट को घुमाने, आकार कम करने, खिसकाने, टेंटान करने आदि की अनुमति देता है。

और देखें:

CSS संदर्भ दस्तावेज़:transform गुण

उदाहरण

डिव एलिमेंट को घुमाएँ:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

अपने आप साफ़ी प्रयोग करें

व्याकरण

transform गुण वापस करने के लिए:

object.style.transform

transform गुण सेट करने के लिए:

object.style.transform = "none|transform-functions|initial|inherit"

गुण मूल्य

मूल्य वर्णन
none कोई ट्रांसफॉर्म नहीं होने चाहिए
matrix(n, n, n, n, n, n) छह मूल्यों वाले मैट्रिक्स का प्रयोग करके दो आयामी ट्रांसफॉर्म को परिभाषित करता है।
matrix3d(n, n, n, n, आदि...) 16 मूल्यों वाले 4x4 मैट्रिक्स का प्रयोग करके 3D ट्रांसफॉर्म को परिभाषित करता है।
translate(x, y) 2D तिरफा को परिभाषित करता है।
translate3d(x, y, z) 3D तिरफा को परिभाषित करता है।
translateX(x) केवल X अक्ष के मूल्य का प्रयोग करते हुए तिरफा को परिभाषित करता है।
translateY(y) केवल Y अक्ष के मूल्य का प्रयोग करते हुए तिरफा को परिभाषित करता है।
translateZ(z) 3D तिरफा को परिभाषित करता है, केवल Z अक्ष के मूल्य का प्रयोग करता है।
scale(x, y) 2D अनुपात को परिभाषित करता है
scale3d(x, y, z) 3D अनुपात ट्रांसफॉर्म को परिभाषित करता है।
scaleX(x) X अक्ष को एक मूल्य देकर अनुपात ट्रांसफॉर्म को परिभाषित करता है।
scaleY(y) Y अक्ष को एक मूल्य देकर अनुपात ट्रांसफॉर्म को परिभाषित करता है।
scaleZ(z) Z अक्ष को एक मूल्य देकर 3D अनुपात ट्रांसफॉर्म को परिभाषित करता है।
rotate(angle) दिशा में दिए गए घूर्णन को परिभाषित करता है।
rotate3d(x, y, z, angle) 3D घुमाव को परिभाषित करता है।
rotateX(angle) X अक्ष पर चलने वाले 3D घुमाव को परिभाषित करता है।
rotateY(angle) Y अक्ष पर चलने वाले 3D घुमाव को परिभाषित करता है।
rotateZ(angle) Z अक्ष पर चलने वाले 3D घुमाव को परिभाषित करता है।
skew(x-angle, y-angle) X और Y अक्ष पर चलने वाले 2D झुकाव ट्रांसफॉर्म को परिभाषित करता है।
skewX(angle) X अक्ष पर चलने वाले 2D झुकाव ट्रांसफॉर्म को परिभाषित करता है।
skewY(angle) Y अक्ष पर चलने वाले 2D झुकाव ट्रांसफॉर्म को परिभाषित करता है।
perspective(n) 3D ट्रांसफॉर्म तत्व के परिप्रेक्ष्य को परिभाषित करता है।
initial इस गुण को उसके मूलभूत मूल्य पर सेट करें। देखें initial。
inherit इस गुण को उसके पिता तत्व से विरासत करें। देखें inherit。

तकनीकी विवरण

मूलभूत मूल्य: बिना किसी चीज़ के
परिणाम: एक तारा में वर्णित शब्द, जो तत्व के transform गुण。
CSS संस्करण： CSS3

ब्राउज़र समर्थन

इस तालिका में आंकड़े इस गुण के पहले पूरी तरह से समर्थन करने वाले ब्राउज़र का संस्करण दर्शाते हैं।

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0