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;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

ఉపయోగించండి matrix3d() మరొక <div> ఎలమెంట్ కోసం త్రికోణ మార్పు సృష్టించండి:

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 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 变换