CSS matrix() फ़ंक्शन

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

CSS का matrix() फ़ंक्शन छह मानों के सहित एक दो-आयामी ट्रांसफॉर्म को परिभाषित करता है。

matrix() फ़ंक्शन छह पारामीटर लेता है, जो आपको एलिमेंट को घुमाने, आकार बढ़ाने, गति देने और चमकीलापन करने की अनुमति देते हैं。

पारामीटर निम्नलिखित हैं: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

इन्स्टैंस

उदाहरण 1

इस्तेमाल करें matrix() कई <div> एलिमेंट के लिए दो-आयामी ट्रांसफॉर्म को परिभाषित करें:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

अपने आप प्रयास करें

उदाहरण 2

इस्तेमाल करें matrix() इमेज के लिए दो-आयामी ट्रांसफॉर्म क्रिएट करने के लिए:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

अपने आप प्रयास करें

CSS व्याकरण

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

तकनीकी विवरण

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

तालिका में दिए गए नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

संदर्भ:CSS ट्रांसफॉर्म प्रभाव

संदर्भ:CSS matrix3d() फ़ंक्शन

ट्यूटोरियल:CSS 2D ट्रांसफॉर्म