如何使用矩阵变换和其他变换CSS属性？

Question

在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);

我知道上面显示的值是对象的股票价值，但所有数字的含义是什么？

Answer 1

上面提到的转换属性属于CSS属性的 2D Transforms 类别。除了上面提到的matrix()方法之外，还有一些其他方法伴随着变换：

translate()，rotate()，scale()和skew()

要了解matrix()方法，最好先了解其他四种类型。

<强> TRANSFORMS：

这四种转换方法与听起来完全一样。

<强>翻译

查看翻译示例here。

translate(e, f)有两个参数。第一个参数是元素的x位置，而第二个参数是y位置 - 两者都相对于其初始位置。如果要将元素50px向右移动并向下移动100px，则CSS看起来像transform: translate(50px, 100px);。正X是正确的，正Y是向下的;负数将元素向相反方向移动。

<强> ROTATE：

查看轮播示例here。

rotate(c)接受一个参数，这是您希望元素拥有的旋转量。正向旋转为顺时针，负向为逆时针。顺时针旋转30度（正）元素看起来像transform: rotate(30deg);。请注意，这次参数位于deg且不是 px。

<强> SCALE：

查看比例示例here。

scale(a, d)有两个参数。第一个参数是在X方向上缩放的量，而第二个参数是在Y方向上缩放的量。缩放通过将当前值（宽度，高度）乘以缩放值来实现。在X方向上将元素缩放2倍，在Y方向上缩放4倍，看起来像transform: scale(2, 4);。参数可以是任何值，包括小数，甚至是负数。负值具有围绕相应轴翻转元素的效果。

<强> SKEW：

查看偏差示例here。

skew(b, c)可能是解释最混乱的转变。 skew(c, d)有两个参数。第一个参数对应于水平表面（顶部和底部），而第二个参数对应于垂直表面（左侧和右侧）。这两个参数都在deg中，类似于rotate()。第一个参数的正值将围绕其中心点逆时针旋转垂直曲面。负值将围绕其中心点顺时针旋转垂直表面。第二个参数的正值围绕其中心点顺时针旋转水平曲面，而负值则逆时针旋转水平曲面。每个参数的限制（以度为单位）为+ -90deg - 如以下示例所示。

<强> MATRIX：

查看矩阵示例here。

matrix(a, b, c, d, e, f)执行之前列出的转换所做的一切。

两个参数a和d分别用于在X方向和Y方向上缩放元素。 与scale(a, d)方法相同。

第二个和第三个参数b和c用于倾斜元素。这两个值与<{1}}方法的完全相同。

最后，最后两个参数skew(b, c)和e分别用于在X方向和Y方向上平移元素。 与f方法相同。

您可以使用translate(e, f)转换来实现令人难以置信的数量效果。看一下this网站，向下滚动页面（在计算机上，而不是移动设备上）会导致页面上的元素通过matrix()方法进行转换。这会产生很好的效果！

最后，不同浏览器的语法不同。根据w3schools here，他们是以下

matrix()

最佳做法是在启动您的网站之前在各种浏览器上测试它们。

有关各种2D转换的更多信息，请查看this link。对于transform: -ms-transform: /* IE 9 */ -webkit-transform: /* Safari and Chrome */ 方法背后的数学，请查看this link。

Answer 2

当你没有数学背景时，我建议你不要花时间去研究矩阵，而是要了解其他变换并知道如何将它们组合成一行，因为如果你试图将它们分开，只有最后一个指令是执行。

而不是这个

#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)
}

这样就可以得到你想要的结果，你可以把头包起来，并拥有与矩阵一样多的力量。