CSS 函式 - matrix3d()

CSS 函式matrix3d()類似於matrix()函式，但它指定了一個由齊次 4x4 矩陣表示的 3D 變換，從而產生<transform-matrix>的資料型別。

可能的值

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 - 這些是<number>，描述線性變換。
a4 b4 c4 d4 - 這些是<number>，描述要應用的平移。

語法

matrix3d()函式使用以列為主序描述的 16 個值定義。

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

每個引數（a1 到 d4）對應於 4x4 矩陣中的特定值，表示 3D 變換。

ai（其中 i 是行號，範圍從 1 到 4）：表示矩陣中第 i 行的元素。
bi（其中 i 是行號，範圍從 1 到 4）：表示矩陣中第 i 行的元素。
ci（其中 i 是行號，範圍從 1 到 4）：表示矩陣中第 i 行的元素。
di（其中 i 是行號，範圍從 1 到 4）：表示矩陣中第 i 行的元素。

CSS matrix3d() - 基本示例

以下示例演示了matrix3d()的使用，並且還演示了一個涉及平移和縮放效果的動態動畫。

<html>
<head>
<style>
   html {
      width: 100%;
   }
   body {
      height: 100vh;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-content: center;
   }
   .box {
      width: 150px;
      height: 150px;
      background: #FFAC1C;
      border-radius: 20px;
      text-align: center;
      line-height: 150px;
      color: white;
      font-family: Arial, sans-serif;
      font-size: 18px;
      animation: RotateScale 2s alternate linear infinite;
   }
   @keyframes RotateScale {
      from {
      transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 1
      );
      }
      to {
      transform: matrix3d(
      1.2, 0, 0, 0,
      0, 1.2, 0, 0,
      0, 0, 1.2, 0,
      0, 0, 0, 1
      );
      }
   }
</style>
</head>
<body>
<div class="box">
   matrix3d() example
</div>
</body>
</html>

CSS matrix3d() - 3d 立方體

此示例演示了一個由 DOM 元素和變換組成的 3d 立方體。當懸停或聚焦時，可以使用matrix3d()對其進行互動式變換。

<html>
<head>
<style>
   #custom-cube {
      width: 150px;
      height: 150px;
      transform-style: preserve-3d;
      transition: transform 1s;
      transform: rotate3d(1, 1, 1, 45deg);
      margin: 50px auto;
   }
   #custom-cube:hover,
   #custom-cube:focus {
      transform: rotate3d(1, 1, 1, 45deg) matrix3d(
      1,
      0,
      0,
      0,
      0,
      1,
      6,
      0,
      0,
      0,
      1,
      0,
      50,
      100,
      0,
      1.2
      );
   }
   .face {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: inherit;
      font-size: 40px;
      color: #fff;
   }
   .front {
      background: rgba(255, 99, 71, 0.9);
      transform: translateZ(75px);
   }
   .back {
      background: rgba(0, 128, 0, 0.9);
      transform: rotateY(180deg) translateZ(75px);
   }
   .right {
      background: rgba(255, 165, 0, 0.9);
      transform: rotateY(90deg) translateZ(75px);
   }
   .left {
      background: rgba(0, 0, 255, 0.9);
      transform: rotateY(-90deg) translateZ(75px);
   }
   .top {
      background: rgba(218, 112, 214, 0.9);
      transform: rotateX(90deg) translateZ(75px);
   }
   .bottom {
      background: rgba(255, 0, 255, 0.9);
      transform: rotateX(-90deg) translateZ(75px);
   }
</style>
</head>
<body>
   <section id="custom-cube" tabindex="0">
         <div class="face front"> Face A</div>
         <div class="face back">Face B</div>
         <div class="face right">Face C</div>
         <div class="face left">Face D</div>
         <div class="face top">Face E</div>
         <div class="face bottom">Face F</div>
   </section>
</body>
</html>

列印頁面