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

Question

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

我知道上面显示的值是对象的库存值,但所有数字的含义是什么？

Answer 1

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

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

要理解该matrix()方法,最好先了解其他四种类型.

TRANSFORMS:

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

翻译:

在这里查看翻译示例.

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

ROTATE:

在这里查看旋转示例.

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

规模:

在这里查看比例示例.

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

SKEW:

在这里查看偏斜示例.

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

矩阵:

在这里查看矩阵示例.

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()转换来实现令人难以置信的数量效果.看看这个网站,向下滚动页面(在计算机上,而不是移动设备上)会导致页面上的元素通过该matrix()方法进行转换.它产生了很好的效果!

最后,不同的浏览器有不同的语法.根据w3schools 在这里他们是如下

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

最佳做法是在启动站点之前在各种浏览器上测试它们.

有关各种2D转换的更多信息,请查看此链接.有关该方法背后的数学matrix(),请查看此链接.

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

这样就可以提供您想要的结果，您可以用它缠绕头，并具有与矩阵一样大的功能。