CSS 函数matrix() 定义了具有齐次坐标的二维变换矩阵，从而产生transform() 的数据类型。
可能的值
a b c d - 这些是<number>描述线性变换。
tx ty - 这些是描述要应用的翻译的 <number> .
这些值代表以下函数:matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
语法
matrix() 是一个 4x4 矩阵，但是仅前 6 个值用于 2D 转换。该函数具有以下语法:
matrix(a, b, c, d, tx, ty) a (m11):水平缩放。
b ( m12):垂直倾斜。
c (m21):水平倾斜。
d (m22):垂直缩放。
e (dx):水平平移。
f (dy):垂直平移。
matrix() 函数用于将多个变换组合为单个变换属性。
CSS Matrix(): 基本示例
以下示例演示了 Matrix() 的用法:
<html>
<head>
<style>
.matrix-demo {
transform: matrix(1, -0.2, 0, 1, 0, 0);
background-color: #000;
color: #fff;
padding: 20px;
font-size: 24px;
text-align: center;
}
.normal-demo {
background-color: #ccc;
color: #000;
padding: 20px;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div class="matrix-demo">这是一个矩阵 div</div>
<div class="normal-demo">这是一个普通 div</div>
</body>
</html>