CSS 2D ट्रांसफ़ॉर्म
CSS 2D ट्रांसफ़ॉर्म
CSS रूपांतरण आपको तत्वों को स्थानांतरित करने, घुमाने, स्केल करने और तिरछा करने की अनुमति देता है।
2D रूपांतरण देखने के लिए नीचे दिए गए तत्व पर माउस ले जाएँ:
इस अध्याय में आप निम्नलिखित सीएसएस संपत्ति के बारे में जानेंगे:
transform
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
| Property | |||||
|---|---|---|---|---|---|
| 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()एक्स-अक्ष और वाई-अक्ष के लिए दिए गए पैरामीटर के अनुसार)।
निम्न उदाहरण <div> तत्व को 50 पिक्सेल को दाईं ओर ले जाता है, और 100 पिक्सेल को उसकी वर्तमान स्थिति से नीचे ले जाता है:
उदाहरण
div
{
transform: translate(50px, 100px);
}
घुमाएँ () विधि
विधि किसी तत्व को दी rotate()गई डिग्री के अनुसार दक्षिणावर्त या वामावर्त घुमाती है।
निम्न उदाहरण <div> तत्व को 20 डिग्री के साथ दक्षिणावर्त घुमाता है:
उदाहरण
div
{
transform: rotate(20deg);
}
नकारात्मक मानों का उपयोग करने से तत्व वामावर्त घुमाएगा।
निम्न उदाहरण <div> तत्व को 20 डिग्री के साथ वामावर्त घुमाता है:
उदाहरण
div
{
transform: rotate(-20deg);
}
स्केल () विधि
विधि किसी तत्व के आकार को scale()बढ़ाती या घटाती है (चौड़ाई और ऊंचाई के लिए दिए गए मापदंडों के अनुसार)।
निम्न उदाहरण <div> तत्व को उसकी मूल चौड़ाई का दो गुना और उसकी मूल ऊंचाई का तीन गुना बढ़ाता है:
उदाहरण
div
{
transform: scale(2, 3);
}
निम्न उदाहरण <div> तत्व को उसकी मूल चौड़ाई और ऊंचाई का आधा कर देता है:
उदाहरण
div
{
transform: scale(0.5, 0.5);
}
स्केलएक्स () विधि
विधि किसी तत्व की scaleX()चौड़ाई को बढ़ाती या घटाती है।
निम्न उदाहरण <div> तत्व को उसकी मूल चौड़ाई के दो गुना तक बढ़ा देता है:
उदाहरण
div
{
transform: scaleX(2);
}
निम्न उदाहरण <div> तत्व को उसकी मूल चौड़ाई से आधा कर देता है:
उदाहरण
div
{
transform: scaleX(0.5);
}
स्केलवाई () विधि
विधि किसी तत्व की scaleY()ऊंचाई को बढ़ाती या घटाती है।
निम्न उदाहरण <div> तत्व को उसकी मूल ऊंचाई का तीन गुना बढ़ा देता है:
उदाहरण
div
{
transform: scaleY(3);
}
निम्न उदाहरण <div> तत्व को उसकी मूल ऊंचाई से आधा कर देता है:
उदाहरण
div
{
transform: scaleY(0.5);
}
तिरछा () विधि
यह skewX()विधि किसी तत्व को दिए गए कोण से X-अक्ष के अनुदिश तिरछा करती है।
निम्न उदाहरण X-अक्ष के साथ <div> तत्व को 20 डिग्री पर तिरछा करता है:
उदाहरण
div
{
transform: skewX(20deg);
}
तिरछा () विधि
यह skewY()विधि किसी तत्व को दिए गए कोण से Y-अक्ष के अनुदिश तिरछा करती है।
निम्न उदाहरण Y-अक्ष के साथ <div> तत्व को 20 डिग्री पर तिरछा करता है:
उदाहरण
div
{
transform: skewY(20deg);
}
तिरछा () विधि
यह skew()विधि किसी तत्व को दिए गए कोणों द्वारा X और Y-अक्ष के अनुदिश तिरछा करती है।
निम्न उदाहरण X-अक्ष के साथ <div> तत्व को 20 डिग्री और Y-अक्ष के साथ 10 डिग्री को तिरछा करता है:
उदाहरण
div
{
transform: skew(20deg, 10deg);
}
यदि दूसरा पैरामीटर निर्दिष्ट नहीं है, तो इसका मान शून्य है। तो, निम्न उदाहरण X-अक्ष के साथ <div> तत्व 20 डिग्री को तिरछा करता है:
उदाहरण
div
{
transform: skew(20deg);
}
मैट्रिक्स () विधि
matrix()विधि सभी 2D रूपांतरण विधियों को एक में जोड़ती है ।
मैट्रिक्स () विधि छह पैरामीटर लेती है, जिसमें गणितीय कार्य होते हैं, जो आपको घुमाने, स्केल करने, स्थानांतरित करने (अनुवाद) करने और तत्वों को तिरछा करने की अनुमति देता है।
पैरामीटर इस प्रकार हैं: मैट्रिक्स (स्केलएक्स (), तिरछा (), तिरछा (), स्केलवाई (), अनुवादएक्स (), अनुवाद ())
उदाहरण
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
सीएसएस रूपांतरण गुण
निम्न तालिका सभी 2D रूपांतरण गुणों को सूचीबद्ध करती है:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS 2D ट्रांसफ़ॉर्म मेथड्स
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| 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 |