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>

打印页面