CSS 函数 matrix3d（） 类似于 matrix（） 函数，但指定由齐次 4x4 矩阵表示的 3D 变换，从而产生数据类型 <transform-matrix>。
可能的值
语法
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>
