CSS matrix3d() फ़ंक्शन

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

CSS का matrix3d() फ़ंक्शन 16 नंबरों वाले 4x4 मैट्रिक्स को इस्तेमाल करके तीन आयामी रूपांतरण को परिभाषित करता है:

इन्स्टांस

उदाहरण 1

इस्तेमाल करें matrix3d() एक <div> एलीमेंट के लिए तीन आयामी रूपांतरण को परिभाषित करें:

.div1 {
  transform: matrix3d(
    0.7, 0.1, 0.7, 0,
    -0.6, 0.7, 0.2, 0,
    -0.5, -0.8, 0.7, 0,
    10, 10, 0, 1
  );
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  पैडिंग: 10px;
  background: beige;
  font-family: verdana;
  बॉर्डर: 1px solid green;
}

अपने आप साफ़ी करें

उदाहरण 2

इस्तेमाल करें matrix3d() एक अन्य <div> एलीमेंट के लिए तीन आयामी रूपांतरण बनाएं:

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  पैडिंग: 10px;
  background: beige;
  font-family: verdana;
  बॉर्डर: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  मार्गिन: 50px auto;
}
.div1:hover {
.div1:focus {
  transform: rotate3d(1, 1, 1, 30deg);
  matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

अपने आप साफ़ी करें

CSS व्याकरण

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

तकनीकी विवरण

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

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

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

संदर्भ:CSS ट्रांसफॉर्म प्रतियोगिता

संदर्भ:CSS मैट्रिक्स() फ़ंक्शन

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