CSS matrix() 语法
在 CSS 中，matrix() 函数一般作为 transform 属性的值，用于定义 2D 变换矩阵。
matrix() 可以同时实现平移、旋转、缩放、倾斜等多种变换效果，它通过一个 2 x 3 矩阵（6 个值）来描述复杂的变换组合，适合需要精确控制的场景。
语法：
transform: matrix(a, b, c, d, e, f);说明：
matrix() 函数接受以下参数。
- a 和 d 控制缩放（x 轴和 y 轴）。
- b 和 c 控制倾斜（skew）。
- e 和 f 控制平移（x 轴和 y 轴）。
它对应的矩阵结构如下：
[ a c e ]
[ b d f ]每个点 (x, y) 在变换后的位置 (x', y') 的计算方式为：
x' = a * x + c * y + e
y' = b * x + d * y + f对于 matrix() 函数，小伙伴们需要清楚以下几点：
- matrix() 可以将 translate()、scale()、rotate() 和 skew() 等多个变换合并为一个函数调用，从而提高性能和可读性。
- matrix() 同样可以与其他函数（如 rotate() 或 scale()）等一起使用，比如：transform: matrix(...) rotate(30deg);。
在实际开发中，对于一般的变换效果（如平移、缩放、旋转等），我们更推荐使用单独的函数来实现，因为它们更加简单直观。matrix() 函数主要用于高级场景，比如：
- 通过 JavaScript 动态计算矩阵值。
- 高级动画或图形处理。
- 从设计工具（如 Photoshop）中导出变换。
提示: translate()、scale()、rotate() 等函数的底层，本质上都是基于 matrix() 来实现的。
CSS matrix() 摘要
| 属于 | CSS3 变换 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS matrix() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS matrix() 函数是如何使用的。
示例 1：matrix() 实现缩放效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightskyblue;
transform: matrix(1.5, 0, 0, 1.5, 50, 50);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，matrix(1.5, 0, 0, 1.5, 50, 50) 等价于同时应用 scale(1.5) 和 translate(50px, 50px)。也就是说，下面两种方式是等价的。
/* 方式1 */
matrix(1.5, 0, 0, 1.5, 50, 50)
/* 方式2 */
scale(1.5)
translate(50px, 50px)示例 2：matrix() 实现旋转效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 100px;
background-color: lightskyblue;
transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
matrix(0.707, 0.707, -0.707, 0.707, 0, 0) 等价于 rotate(45deg)。其中， cos(45°)=0.707, sin(45°)=0.707。
示例 3：matrix() 实现倾斜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 100px;
background-color: lightskyblue;
transform: matrix(1, 0.5, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
matrix(1, 0.5, 0, 1, 0, 0) 等价于 skewY(0.5rad)，它表示沿 x 轴倾斜（b=0.5 对应 tan(θ)、约 26.6 度），无缩放（a=1、d=1）和平移（e=0、f=0）。
最终，div 元素会向右倾斜，从而形成一个平行四边形效果。
