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

How do I use the matrix transform and other transform CSS properties?

提问by Birrel

When using the transform property in CSS, one of the possible methods is the matrixmethod that requires 6 input fields. The CSS code would look something like...

在 CSS 中使用 transform 属性时，可能的方法之一是matrix需要 6 个输入字段的方法。CSS 代码看起来像……

#test{
    transform: matrix(1, 0, 0, 1, 0, 0);
}

There are also a couple other variations (depending on the browser)...

还有一些其他变体（取决于浏览器）...

-ms-transform: matrix(1, 0, 0, 1, 0, 0);

-webkit-transform: matrix(1, 0, 0, 1, 0, 0);

I know that the values shown above are the stock values for an object, but what do all the numbers mean or do?

我知道上面显示的值是一个对象的库存值，但所有数字的含义或作用是什么？

回答by Birrel

The transformation property mentioned above falls in the 2D Transformscategory of CSS properties. Along with the matrix()method mentioned above, there are a few other methods that accompany transform:

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

translate(), rotate(), scale()and skew()

translate(), rotate(),scale()和skew()

To understand the matrix()method, it is best to understand the other four types first.

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

TRANSFORMS:

变换：

These four methods for transformation are exactly as they sound.

这四种转化方法正如它们所说的那样。

TRANSLATE:

翻译：

Check out translate example here.

在此处查看翻译示例。

translate(e, f)takes in two arguments. The first argument is the x-position of the element, while the second is the y-position - both relative to its initial position. If you wanted to move an element 50px to the right and 100px down, the CSS would look like transform: translate(50px, 100px);. Positive X is right, positive Y is down; negative numbers move the element in the opposite direction.

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

ROTATE:

旋转：

Check out rotate example here.

在此处查看旋转示例。

rotate(c)takes in one argument, which is the amount of rotation you'd like the element to have. Positive rotation is clockwise, negative is counterclockwise. Rotating an element 30 degrees clockwise (positive) would look like transform: rotate(30deg);. Note that this time the argument is in degand notpx.

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

SCALE:

规模：

Check out scale example here.

在此处查看比例示例。

scale(a, d)takes in two arguments. The first argument is the amount to scale in the X-direction, while the second argument is the amount to scale in the Y-direction. Scaling works by multiplyingthe current value (width, height) by the scale value. Scaling an element by 2 times in the X-direction and 4 times in the Y-direction would look like transform: scale(2, 4);. The arguments can be any value, including decimals, and even negative. Negative values have the effect of flipping the element about the respective axis.

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

SKEW:

偏斜：

Check out skew example here.

在此处查看偏斜示例。

skew(b, c)is potentially the most confusing transformation to explain. skew(c, d)takes in two arguments. The first argument corresponds to the horizontal surfaces (top and bottom), while the second argument corresponds to the vertical surfaces (left and right). Both arguments are in deg, similar to that of rotate(). Positive values for the first argument will rotate the vertical surfaces counterclockwise about their center points. Negative values will rotate the vertical surfaces clockwise about their center points. Positive values for the second argument rotate the horizontal surfaces clockwise about their center points, while negative values rotate the horizontal surfaces counterclockwise. The limit (in deg) for each argument is +-90deg - as seen in the following example.

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

MATRIX:

矩阵：

Check out matrix example here.

在此处查看矩阵示例。

matrix(a, b, c, d, e, f)does everything that the previously listed transformation do.

matrix(a, b, c, d, e, f)完成前面列出的转换所做的一切。

The two arguments, aand dare for scaling the element in the X-direction and the Y-direction, respectively. Identicallyto that of the scale(a, d)method.

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

The second and third arguments band care for skewing the element. The two values work identicallyto that of the skew(b, c)method.

第二个和第三个参数b和c用于倾斜元素。这两个值的工作相同，以使的skew(b, c)方法。

Finally, the last two arguments eand fare for translating the element in the X-direction and the Y-direction, respectively. Identicallyto that of the translate(e, f)method.

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

You can use the matrix()transformation to achieve an incredible amount effects. Take a look at thiswebsite, where scrolling down the page (on computers, not mobile devices) causes elements on the page to transform via the matrix()method. It makes for a great effect!

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

Finally, there are different syntax for different browsers. According to w3schools herethey are the following

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

transform:
-ms-transform: /* IE 9 */
-webkit-transform: /* Safari and Chrome */

The best practice is to test them on various browsers before launching your site.

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

For further information about various 2D Transformations, check out this link. For the mathematics behind the matrix()method, check out this link.

有关各种 2D 变换的更多信息，请查看此链接。有关该方法背后的数学matrix()原理，请查看此链接。

回答by Sunday Ikpe

Instead of spending time trying to wrap your head around matrices when you don't have a mathematical background I recommend understanding the other transforms and knowing how to combine them in one line since if you try breaking them apart only the last directive is executed.

当您没有数学背景时，不要花时间试图将您的头脑围绕在矩阵上，我建议您了解其他变换并知道如何将它们组合在一行中，因为如果您尝试将它们分开，则只会执行最后一条指令。

Instead of this

而不是这个

#shape {
    transform: rotate(40deg);
    transform: translate(100px, 30px);
    transform: scale(0.8, 0.4);
}

Do this instead:

改为这样做：

#shape {
    transform: rotate(40deg) translate(100px, 30px) scale(0.8, 0.4)
}

And that gives you your desired result which you can wrap your head around and has as much power as the matrix.

这为您提供了您想要的结果，您可以将头环绕并具有与矩阵一样多的力量。