CSS matrix3d() 函数

定义和用法

CSS 的 matrix3d() 函数通过使用包含 16 个值的 4x4 矩阵来定义三维变换：

实例

例子 1

使用 matrix3d() 为一个 <div> 元素定义三维变换：

.div1 {
  transform: matrix3d(
    0.7, 0.1, 0.7, 0,
    -0.6, 0.7, 0.2, 0,
    -0.5, -0.8, 0.7, 0,
    10, 10, 0, 1
  );
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
}

亲自试一试

例子 2

使用 matrix3d() 为另一个 <div> 元素创建三维变换：

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}

.div1:hover,
.div1: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);
}

亲自试一试

CSS 语法

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

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

参考：CSS transform 属性

参考：CSS matrix() 函数

教程：CSS 3D 变换