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

Question

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

35

在使用CSS中的transform属性时，其中一种可能的方法是使用matrix方法，该方法需要6个输入字段。 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);

我知道上面显示的数值是对象的库存值，但所有这些数字意味着什么或起到什么作用？

- Birrel

2个回答

9

如果你没有数学背景，不要浪费时间试图理解矩阵。我建议先理解其他的变换，并知道如何在一行中组合它们，因为如果你试图将它们分解开来，只会执行最后一个指令。

不要这样做

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

这将为您提供所需的结果，您可以理解并具有与矩阵相同的强大功能。

- Sunday Ikpe

5

“…并且具有与《黑客帝国》中的矩阵一样的力量。” 只是随口说说。听起来很棒。 - dudewad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Birrel · Accepted Answer

上述提到的变换属性属于CSS属性的“2D Transforms”类别。除了上面提到的“matrix()”方法外，还有一些其他方法与transform一起使用：

“translate()”、“rotate()”、“scale()”和“skew()”

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

“TRANSFORMS:”

这四种变换方法正如它们的名字所描述的那样。

“TRANSLATE:”

“查看 translate 示例here。”

“translate(e, f)”需要两个参数。第一个参数是元素的x位置，第二个参数是y位置，都是相对于其初始位置的。如果您想将一个元素向右移动50像素和向下移动100像素，则CSS将如下所示：“transform: translate(50px, 100px);”。正的X值向右，正的Y值向下；负数会将元素移动到相反的方向。

Translate

旋转：

请在此处查看旋转示例。

rotate(c) 接受一个参数，即您想要元素旋转的角度。正数表示顺时针旋转，负数表示逆时针旋转。将元素顺时针旋转30度（正数）将如下所示：transform: rotate(30deg);。请注意，这次参数是以deg为单位，而不是px。

Rotate

比例尺:

查看比例尺示例这里。

scale(a, d)接受两个参数。第一个参数是在X方向上缩放的量，而第二个参数是在Y方向上缩放的量。缩放通过将当前值（宽度、高度）乘以比例值实现。在X方向上将元素放大2倍，在Y方向上放大4倍的效果如下：transform: scale(2, 4);。参数可以是任何值，包括小数和负数。负值会使元素沿着相应的轴翻转。

Scale

SKEW:

查看这里的扭曲示例here。

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

Skew

矩阵：

查看矩阵示例此处。

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变换的更多信息，请查看此链接。有关matrix()方法背后的数学，请查看此链接。