CSS 2D ट्रांसफॉर्म
- पिछला पृष्ठ CSS नेटवर्क फ़ॉन्ट
- अगला पृष्ठ CSS 3D ट्रांसफॉर्म
CSS 2D ट्रांसफॉर्म
CSS ट्रांसफॉर्म (transforms) एलीमेंट को खिसकाने, घुमाने, बढ़ाने और ढालने की अनुमति देते हैं。
नीचे के एलीमेंट पर माउस को ले जाकर, 2D ट्रांसफॉर्म देखेंगे:
इस चाप में, आप नीचे के CSS गुण को सीखेंगे:
transform
ब्राउज़र समर्थन
गणना में दिए गए नंबर को पहली बार इस गुण का पूर्ण समर्थन करने वाला ब्राउज़र का संस्करण के रूप में देखा जाता है。
| गुण | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
CSS 2D ट्रांसफॉर्मेशन विधि
CSS का उपयोग करके transform प्रयोग की पैरामीटर, आप नीचे के 2D ट्रांसफॉर्म तरीकों का उपयोग कर सकते हैं:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
सूचना:आप अगले चाप में 3D ट्रांसफॉर्म को सीखेंगे。
translate() तरीका
translate() X और Y अक्ष पर दिए गए पैरामीटर के अनुसार एलीमेंट को उसके मूल स्थान से खिसकाने के लिए तरीका।
नीचे का उदाहरण <div> एलीमेंट को उसके मूल स्थान से 50 पिक्सल दायां और 100 पिक्सल नीचे खिसकाया गया है:
उदाहरण
div {
transform: translate(50px, 100px);
}
rotate() तरीका
rotate() दिए गए कोण के अनुसार एलीमेंट को दिशा में घुमाना या विपरीत दिशा में घुमाना के लिए तरीका।
नीचे का उदाहरण <div> एलीमेंट को 20 डिग्री दिशा में घुमाया गया है:
उदाहरण
div {
transform: rotate(20deg);
}
विपरीत दिशा में घुमाने के लिए नकारात्मक मान इस्तेमाल करें。
नीचे का उदाहरण <div> एलीमेंट को 20 डिग्री विपरीत दिशा में घुमाया गया है:
उदाहरण
div {
transform: rotate(-20deg);
}
scale() तरीका
scale() एलीमेंट के आकार को बढ़ाना या कम करना (दिए गए चौड़ाई और ऊंचाई पैरामीटर के अनुसार) के लिए तरीका।
नीचे का उदाहरण <div> एलीमेंट को उसके मूल चौड़ाई के दोगुना और उसके मूल ऊंचाई के तीन गुना बढ़ा दिया गया है:
उदाहरण
div {
transform: scale(2, 3);
}
नीचे का उदाहरण <div> एलीमेंट को उसके मूल चौड़ाई और ऊंचाई के आधे कर दिया गया है:
उदाहरण
div {
transform: scale(0.5, 0.5);
}
scaleX() तरीका
scaleX() एलीमेंट की चौड़ाई बढ़ाना या कम करना के लिए तरीका।
नीचे का उदाहरण <div> एलीमेंट को उसके मूल चौड़ाई के दोगुना बढ़ा दिया गया है:
उदाहरण
div {
transform: scaleX(2);
}
इस उदाहरण में <div> एलीमेंट को उसके मूल चौड़ाई के आधे कर दिया गया है:
उदाहरण
div {
transform: scaleX(0.5);
}
scaleY() विधि
scaleY() विधि एलिमेंट की ऊंचाई को बढ़ाती या कम करती है।
नीचे का उदाहरण <div> एलिमेंट को अपनी मूल ऊंचाई के तीन गुना बढ़ाता है:
उदाहरण
div {
transform: scaleY(3);
}
नीचे का उदाहरण <div> एलिमेंट को अपनी मूल ऊंचाई के आधे तक कम करता है:
उदाहरण
div {
transform: scaleY(0.5);
}
skewX() विधि
skewX() विधि एलिमेंट को X-अक्ष पर निर्दिष्ट कोण पर ढालती है।
नीचे का उदाहरण <div> एलिमेंट को X-अक्ष पर 20 डिग्री ढालता है:
उदाहरण
div {
transform: skewX(20deg);
}
skewY() विधि
skewY() विधि एलिमेंट को Y-अक्ष पर निर्दिष्ट कोण पर ढालती है।
नीचे का उदाहरण <div> एलिमेंट को Y-अक्ष पर 20 डिग्री ढालता है:
उदाहरण
div {
transform: skewY(20deg);
}
skew() विधि
skew() विधि एलिमेंट को X और Y-अक्ष पर निर्दिष्ट कोण पर ढालती है।
नीचे का उदाहरण <div> एलिमेंट को X-अक्ष पर 20 डिग्री ढालता है, साथ ही Y-अक्ष पर 10 डिग्री ढालता है:
उदाहरण
div {
transform: skew(20deg, 10deg);
}
यदि दूसरा पारामीटर निर्दिष्ट नहीं किया जाता है, तो इसका मान शून्य होता है। इसलिए, नीचे का उदाहरण <div> एलिमेंट को X-अक्ष पर 20 डिग्री ढालता है:
उदाहरण
div {
transform: skew(20deg);
}
matrix() विधि
matrix() matrix() विधि तमाम 2D ट्रांसफॉर्मेशन विधियों को एक में समाहित करती है।
matrix() यह विधि छह पारामीटर लेती है, जिसमें से कुछ गणितीय विधियां भी हैं, जो आपको एलिमेंट को घुमाने, फैलाने, घुमाने (तिर्ना) और ढालने की अनुमति देती हैं।
पारामीटर निम्नलिखित हैं: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
उदाहरण
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS ट्रांसफॉर्मेशन गुण
अधिकांश 2D ट्रांसफॉर्मेशन गुणों को नीचे दिया गया है:
| गुण | वर्णन |
|---|---|
| transform | 2D या 3D ट्रांसफॉर्मेशन 2D एलिमेंट पर लागू करें। |
| transform-origin | आपको ट्रांसफॉर्मेशन किए गए एलिमेंट का स्थान बदलने की अनुमति देती है। |
CSS 2D ट्रांसफॉर्मेशन विधि
| तंत्र | वर्णन |
|---|---|
| matrix(n,n,n,n,n,n) | 2D ट्रांसफॉर्मेशन की परिभाषा, छह मानों के मैट्रिक्स का उपयोग करते हुए। |
| translate(x,y) | 2D ट्रांसफॉर्मेशन की परिभाषा, X और Y-अक्ष पर घुमाएं। |
| translateX(n) | 2D ट्रांसफॉर्मेशन की परिभाषा, एलिमेंट को X-अक्ष पर घुमाएं। |
| translateY(n) | 2D ट्रांसफॉर्मेशन की परिभाषा, एलिमेंट को Y-अक्ष पर घुमाएं। |
| scale(x,y) | 2D स्केलिंग ट्रांसफॉर्म को परिभाषित करें, एलीमेंट की चौड़ाई और ऊंचाई को बदलें。 |
| scaleX(n) | 2D स्केलिंग ट्रांसफॉर्म को परिभाषित करें, एलीमेंट की चौड़ाई को बदलें。 |
| scaleY(n) | 2D स्केलिंग ट्रांसफॉर्म को परिभाषित करें, एलीमेंट की ऊंचाई को बदलें。 |
| rotate(एंगल) | 2D रोटेशन को परिभाषित करें, वैधानिक में दिए गए कोण को निर्दिष्ट करें。 |
| skew(x-angle,y-angle) | 2D टिल्ट ट्रांसफॉर्म को परिभाषित करें, X और Y अक्ष पर चलने वाला है。 |
| skewX(एंगल) | 2D टिल्ट ट्रांसफॉर्म को परिभाषित करें, X अक्ष पर चलने वाला है。 |
| skewY(एंगल) | 2D टिल्ट ट्रांसफॉर्म को परिभाषित करें, Y अक्ष पर चलने वाला है。 |
- पिछला पृष्ठ CSS नेटवर्क फ़ॉन्ट
- अगला पृष्ठ CSS 3D ट्रांसफॉर्म
