在 CSS 中使用 transform 属性时，可能的方法之一是需要 6 个输入字段的 matrix 方法。 CSS 代码看起来像...
#test{
transform: matrix(1, 0, 0, 1, 0, 0);
}
还有一些其他变体（取决于浏览器）...
-ms-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
我知道上面显示的值是对象的库存值，但是所有数字的含义或作用是什么？
【问题讨论】：
标签： css transform css-transforms
上面提到的transformation 属性属于CSS 属性的2D Transforms 类别。除了上面提到的matrix() 方法之外，还有其他一些伴随变换的方法：
translate()、rotate()、scale() 和 skew()
要了解matrix()方法，最好先了解其他四种类型。
变换：
这四种转换方法，一如其名。
翻译：
查看翻译示例here。
translate(e, f) 接受两个参数。第一个参数是元素的 x 位置，而第二个参数是 y 位置 - 两者都相对于其初始位置。如果你想将一个元素向右移动 50 像素并向下移动 100 像素，CSS 看起来像 transform: translate(50px, 100px);。正X为右，正Y为下；负数向相反方向移动元素。
旋转：
查看旋转示例 here。
rotate(c) 接受一个参数，即您希望元素具有的旋转量。正转为顺时针，负转为逆时针。将元素顺时针旋转 30 度（正）看起来像 transform: rotate(30deg);。请注意，这一次参数在 deg 和 not px。
规模：
查看比例示例here。
scale(a, d) 接受两个参数。第一个参数是 X 方向的缩放量，而第二个参数是 Y 方向的缩放量。缩放通过乘当前值（宽度、高度）乘以缩放值来进行。将元素在 X 方向缩放 2 倍，在 Y 方向缩放 4 倍看起来像transform: scale(2, 4);。参数可以是任何值，包括小数，甚至是负数。负值具有围绕相应轴翻转元素的效果。
偏斜：
查看倾斜示例 here。
skew(b, c) 可能是最难以解释的转换。 skew(c, d) 接受两个参数。第一个参数对应于水平表面（顶部和底部），而第二个参数对应于垂直表面（左侧和右侧）。两个参数都在deg 中，类似于rotate()。第一个参数的正值将围绕其中心点逆时针旋转垂直表面。负值将围绕其中心点顺时针旋转垂直表面。第二个参数的正值绕其中心点顺时针旋转水平表面，而负值则逆时针旋转水平表面。每个参数的限制（以度为单位）为 +-90 度 - 如下例所示。
矩阵：
查看矩阵示例here。
matrix(a, b, c, d, e, f) 完成前面列出的转换所做的一切。
a 和 d 这两个参数分别用于在 X 方向和 Y 方向缩放元素。 与scale(a, d) 方法相同。
第二个和第三个参数b 和c 用于倾斜元素。这两个值与skew(b, c) 方法的值相同。
最后，最后两个参数e 和f 分别用于在X 方向和Y 方向平移元素。 与translate(e, f) 方法相同。
您可以使用matrix() 转换来实现令人难以置信的数量效果。看看this 网站，向下滚动页面（在计算机上，而不是移动设备上）会导致页面上的元素通过matrix() 方法进行转换。效果很好！
最后，不同的浏览器有不同的语法。根据 w3schools here 他们如下
transform:
-ms-transform: /* IE 9 */
-webkit-transform: /* Safari and Chrome */
最佳做法是在启动您的网站之前在各种浏览器上对其进行测试。
有关各种 2D 变换的更多信息，请查看this link。有关matrix() 方法背后的数学原理，请查看this link。
【讨论】：
matrix(0.8, 0.5, -0.5, 0.8, 0, 0)
当您没有数学背景时，不要花时间尝试将您的头绕在矩阵上，我建议您了解其他转换并知道如何将它们组合在一行中，因为如果您尝试将它们分开，只有最后一个指令是执行。
不是这个
#shape {
transform: rotate(40deg);
transform: translate(100px, 30px);
transform: scale(0.8, 0.4);
}
改为这样做：
#shape {
transform: rotate(40deg) translate(100px, 30px) scale(0.8, 0.4)
}
这会为您提供您想要的结果，您可以将头绕在周围，并且具有与矩阵一样大的力量。
【讨论】：