matrix3d()

åºçº¿ å¹¿æ³å¯ç¨

matrix3d() CSS å½æ°ä»¥ 4x4 é½æ¬¡ç©éµçå½¢å¼å®ä¹ä¸ä¸ª 3D åæ¢ãå¶ç»ææ¯ä¸ä¸ª <transform-function> æ°æ®ç±»åã

å°è¯ä¸ä¸

transform: matrix3d(
  -0.6,
  1.34788,
  0,
  0,
  -2.34788,
  -0.6,
  0,
  0,
  0,
  0,
  1,
  0,
  0,
  0,
  10,
  1
);

transform: matrix3d(
  0.5,
  0,
  -0.866025,
  0,
  0.595877,
  1.2,
  -1.03209,
  0,
  0.866025,
  0,
  0.5,
  0,
  25.9808,
  0,
  15,
  1
);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

è¯æ³

css

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

å¼

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3: æè¿°çº¿æ§åæ¢ç <number> å¼ã
a4 b4 c4 d4: æè¿°è¦åºç¨çå¹³ç§»ç <number> å¼ã

â^2 ä¸çç¬å¡å°åæ	ââ^2 ä¸çé½æ¬¡åæ	â^3 ä¸çç¬å¡å°åæ	ââ^3 ä¸çé½æ¬¡åæ
æ¤åæ¢éç¨äº 3D ç©ºé´ï¼æ æ³å¨å¹³é¢ä¸è¡¨ç¤ºã		éç¨ç 3D ä»¿å°åæ¢æ æ³ä½¿ç¨ç¬å¡å°åæ ç©éµè¡¨ç¤ºï¼å ä¸ºå¹³ç§»ä¸æ¯çº¿æ§åæ¢ã	$\left( \begin{array}{cccc} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \\ \end{array} \right)$

å½¢å¼è¯æ³

<matrix3d()> = 
  matrix3d( <number>#{16} )

ç¤ºä¾

ç«æ¹ä½åç¼©ç¤ºä¾

HTML

html

<section id="example-element" tabindex="0">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

CSS

css

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}

#example-element:hover,
#example-element: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);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

ç»æ

ç©éµå¹³ç§»åç¼©æ¾ç¤ºä¾

HTML

html

<div class="foo">
  é£æ¶åä»è®¤ä¸ºå¿éä¸éè¦çæ¯æ¥è§¦å¤§èªç¶ï¼æ¥è§¦æ¾ç»çæ´»è¿ãææ³è¿ãæ¥è§¦è¿çåäººï¼å¦æ¥è§¦å²å¦ãè¯æï¼ï¼ç°å¨è®¤ä¸ºå¿éãä¸éè¦çæ¯äººä¸ºçè§ç« å¶åº¦ï¼ä¸è·åäºä»¬äº¤å¾ãââåå¤«Â·æå°æ¯æ³°ãå¤æ´»ã
</div>

CSS

css

html {
  width: 100%;
}
body {
  height: 100vh;
  /* åå®¹å±ä¸ */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
.foo {
  width: 50%;
  padding: 1em;
  color: white;
  background: #ff8c66;
  border: 2px dashed black;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  /* è®¾ç½®å¨ç»ä»¥ä¾¿æ´å¥½å°æ¼ç¤º */
  animation: MotionScale 2s alternate linear infinite;
}

@keyframes MotionScale {
  from {
    /*
      è¿éä½¿ç¨äºåä½ç©éµä½ä¸ºåºç¡ã
      ä¸åç©éµæè¿°äºä»¥ä¸åæ¢ï¼
        å°æ¯ä¸ª X åæ å¹³ç§» -50px
        å°æ¯ä¸ª Y åæ å¹³ç§» -100px
        å°æ¯ä¸ª Z åæ å¹³ç§» 0
        å°æ¯ä¸ªåæ ç¼©å° 10%
    */
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      -50, -100, 0, 1.1
    );
  }
  50% {
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 0.9
    );
  }
  to {
     transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      50, 100, 0, 1.1
    )
  }
}