CSS 数据类型

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 to 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>