From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../web/css/transform-function/matrix/index.html | 85 ++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 files/zh-cn/web/css/transform-function/matrix/index.html (limited to 'files/zh-cn/web/css/transform-function/matrix/index.html') diff --git a/files/zh-cn/web/css/transform-function/matrix/index.html b/files/zh-cn/web/css/transform-function/matrix/index.html new file mode 100644 index 0000000000..7f5f8f8e62 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/matrix/index.html @@ -0,0 +1,85 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +--- +

CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的,而不是由参数传递的;其他的参数是以列优先的顺序描述的。

+ +

matrix(a, b, c, d, tx, ty)matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。

+ +
注意: 直到 Firefox 16, Gecko 才接受对于 tx ty 的 {{cssxref("<length>")}} 值.
+ +

语法

+ +
matrix(a, b, c, d, tx, ty)
+
+ +

参数值

+ +
+
a b c d
+
描述线性变换的 {{cssxref("<number>")}} 。
+
tx ty
+
描述如何应用这个变换的 {{cssxref("<number>")}} 。
+
+ + + + + + + + + + + + + + + + + + + + + +
2 下的笛卡尔坐标ℝℙ齐次坐标3下的笛卡尔坐标ℝℙ3下的齐次坐标
ac bd +


+ a  c  tx
+ b  d  ty
+ 0  0  1

+
a  c  tx
+ b  d  ty
+ 0  0  1
ac0txbd0ty00100001
[a b c d tx ty]
+ +

这些值表示以下函数:

+ +

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

+ +

示例

+ +

HTML

+ +
<div>Normal</div>
+<div class="changed">Changed</div>
+
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
+
+
+ +

结果

+ +

请看英文版案例 /zh-CN/docs/Web/CSS/transform-function/matrix#Result

-- cgit v1.2.3-54-g00ecf