CSS ट्रांसफॉर्म-ओरिजिन प्रभाव
- पिछला पृष्ठ transform
- अगला पृष्ठ transform-style
रिकार्ड और उपयोग
transform-origin गुण आपको ट्रांसफॉर्म किए गए एलीमेंट का स्थान बदलने की अनुमति देता है。
2D ट्रांसफॉर्म एलीमेंट एलीमेंट के x और y अक्ष को बदल सकते हैं। 3D ट्रांसफॉर्म एलीमेंट अपने Z अक्ष को भी बदल सकते हैं。
transform-origin गुण को बेहतर समझने के लिए इसे देखेंप्रदर्शन。
सैफारी/च्रोम उपयोगकर्ता: transform-origin गुण के 3D ट्रांसफॉर्म के प्रयोग को बेहतर समझने के लिए इसे देखेंप्रदर्शन。
टिप्पणी:इस गुण को transform गुण के साथ प्रयोग करें。
transform गुण को बेहतर समझने के लिए इसे देखेंप्रदर्शन。
और देखें:
CSS3 पढ़ाई:CSS3 2D ट्रांसफॉर्म
CSS3 पढ़ाई:CSS3 3D ट्रांसफॉर्म
HTML DOM संदर्भ पुस्तक:transformOrigin गुण
उदाहरण
घुमाने वाले एलीमेंट का आधार स्थान सेट करें:
div {
transform: rotate(45deg);
transform-origin: 20% 40%;
}
पृष्ठ के नीचे अधिक उदाहरण हैं。
CSS व्याकरण
transform-origin: x-axis y-axis z-axis;
गुण मूल्य
| मूल्य | वर्णन |
|---|---|
| x-axis |
दृश्य को X अक्ष पर कहाँ रखा जाएगा। संभावित मूल्य:
|
| y-axis |
दृश्य को Y अक्ष पर कहाँ रखा जाएगा। संभावित मूल्य:
|
| z-axis |
दृश्य को Z अक्ष पर कहाँ रखा जाएगा। संभावित मूल्य:
|
तकनीकी विवरण
| मूलभूत मूल्य: | 50% 50% 0 |
|---|---|
| विरासतीयता: | नहीं |
| संस्करण: | CSS3 |
| जेविस्क्रिप्ट व्याकरण: | ऑब्जैक्ट.style.transformOrigin="20% 40%" |
ब्राउज़र समर्थन
तालिका में संख्याएं इस गुण के पूर्ण समर्थन वाले पहले ब्राउज़र संस्करण को दर्शाती हैं।
सभी -webkit-、-moz- या -ms- से शुरू होने वाले संख्याओं का प्रयोग पूर्व-अभिधान का पहला संस्करण के लिए है।
| गुण | च्रोम | आईई | फायरफॉक्स | सैफारी | ओपेरा |
|---|---|---|---|---|---|
| transform-origin (दो-मूल्य व्याकरण) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform-origin (तीन-मूल्य व्याकरण) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
- पिछला पृष्ठ transform
- अगला पृष्ठ transform-style
