Funguo ya matrix3d() ya CSS

Muhtasari na matumizi

Inasababu ya CSS matrix3d() Funguo inayotumia matathani ya 4x4 ya 16 wakati inayowakilisha uharibifu wa kimaadili

Mfano

Mfano 1

Kutumia matrix3d() Kumengenia uharibifu wa kimaadili kwa <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;
}

Kutenda kwa kufikia hapa

Mfano 2

Kutumia matrix3d() Kumengenia uharibifu wa uharibifu wa kimaadili kwa <div> mwingine:

.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);
}

Kutenda kwa kufikia hapa

Inasababu ya CSS

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

Vivutio ya teknolojia

Muhimu wa browseri

Mafanikio ya tabia inaainisha msingi wa sababu ya kumwambia kufikia browseri ya kwanza inayosimamia kufanya hii hatua.

Vipindi vya muhimu

Marejeo:Mfano wa transform katika CSS

Marejeo:Funksheni ya matrix() katika CSS

Mafunzo:Machakato ya 3D ya CSS