CSS3 matrix3d() फ़ंक्शन

CSS में matrix3d() फ़ंक्शन का उपयोग 4x4 सजातीय 3D ट्रांसफॉर्मेशन मैट्रिक्स को परिभाषित करने के लिए किया जाता है। यह 3D स्पेस में जटिल ट्रांसफॉर्मेशन (स्थानांतरण, घुमाव, स्केलिंग, तिरछा) को एक मैट्रिक्स में संयोजित करता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .demo_img { 
        transform: matrix3d(1,1,0,0, 0,1,0,0, 0,0,1,0, 1,100,0,1); 
      } 
    </style> 
  </head> 
  <body> 
    <h1>सीखें</h1> 
    <p>अपाचे स्पार्क सीखें</p> 
    <img class="demo_img" src="https://www.tutorialspoint.com/machine_learning/images/machine-learning-mini-logo.jpg" alt="अपाचे स्पार्क"> 
  </body> 
</html>

आउटपुट

एक और उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .demo_img { 
        transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 50,-100,0,1.1); 
      } 
    </style> 
  </head> 
  <body> 
    <h1>सीखें</h1> 
    <p>अपाचे स्पार्क सीखें</p> 
    <img class="demo_img" src="https://www.tutorialspoint.com/machine_learning/images/machine-learning-mini-logo.jpg" alt="अपाचे स्पार्क"> 
  </body> 
</html>

आउटपुट

व्याख्या: matrix3d() 16 मान लेता है (कॉलम-मेजर ऑर्डर में 4x4 मैट्रिक्स): m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44। अंतिम पंक्ति (m41, m42, m43, m44) आमतौर पर ट्रांसलेशन और परिप्रेक्ष्य को नियंत्रित करती है। यह translate3d(), rotate3d(), scale3d(), perspective() को एक ऑपरेशन में जोड़ता है।