CSS 函数 - matrix()_CSS 菜鸟教程

CSS 函数 matrix（） 定义了一个具有齐次坐标的 2D 变换矩阵，从而产生 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>

<< CSS 函数 - matrix3d() CSS 函数 - skew() >>