matrix() फंक्शन
CSS में matrix() फंक्शन का उपयोग एक समरूप 2D ट्रांसफॉर्मेशन मैट्रिक्स को परिभाषित करने के लिए किया जाता है। रैखिक ट्रांसफॉर्मेशन को पैरामीटर के रूप में सेट करें।
सिंटैक्स:
transform: matrix(a, b, c, d, tx, ty);
मैट्रिक्स पैरामीटर्स:
यह 2x3 मैट्रिक्स दर्शाता है:
[ a c tx ] [ b d ty ] [ 0 0 1 ]
- a, d: स्केलिंग (X, Y)
- b, c: तिरछापन/शीयरिंग (X, Y)
- tx, ty: ट्रांसलेशन (X, Y)
समतुल्य ट्रांसफॉर्म फंक्शन्स:
/* matrix(a, b, c, d, tx, ty) इनके बराबर है: */ transform: translate(tx, ty) rotate(θ) scale(sx, sy) skew(ax, ay);
उदाहरण 1
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
transform: matrix(2, 1, -1, 1, 190, 100);
}
.skew_img {
transform-origin: top right;
transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>सीखें</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
आउटपुट
पहली इमेज (Numpy) पर मैट्रिक्स ट्रांसफॉर्मेशन: स्केल X=2, शीयर Y=1, शीयर X=-1, स्केल Y=1, ट्रांसलेट X=190px, Y=100px।
उदाहरण 2
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
transform: matrix(0.9, 0.8, -0.8, 0.8, 100, -30);
}
.skew_img {
transform-origin: left;
transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>सीखें</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
आउटपुट
दूसरा मैट्रिक्स: हल्का स्केल डाउन, शीयरिंग, और ट्रांसलेशन।
व्यावहारिक उपयोग:
- जटिल ट्रांसफॉर्मेशन्स को सिंगल मैट्रिक्स में संयोजित करना (प्रदर्शन)
- JS एनिमेशन लाइब्रेरीज द्वारा उपयोग (GSAP, anime.js)
- CSS ट्रांजीशन्स के लिए इंटरपोलेशन
- 2D गेम ग्राफिक्स, डेटा विज़ुअलाइज़ेशन
matrix3d() - 3D संस्करण:
transform: matrix3d( m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 );
4x4 मैट्रिक्स 3D ट्रांसफॉर्मेशन्स के लिए (पर्सपेक्टिव सहित)।
नोट:
मैन्युअल मैट्रिक्स गणना जटिल है। आमतौर पर translate(), rotate(), scale(), skew() का उपयोग करें और ब्राउज़र को मैट्रिक्स की गणना करने दें।
