小编Ajo*_*oy 的帖子

比较以下两个代码片段-

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.box1 {
  margin: 100px;
  transform: skew(30deg);
}

<div class="box box1"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.box2 {
  transform: matrix(1, 0, 30, 1, 0, 0);
}

<div class="box box2"></div>

在我使用的第一个代码片段和我使用transform: skew(30deg); 的第二个代码片段中， transform: matrix(1,0,30,1,0,0); 正如您在matrix()函数中看到的那样，我将所有参数保留为默认值，但skewX()我将其更改为30. skew(30deg)根据我的假设，这应该像工作一样。由于文档说matrix()采用如下参数：

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() );

如果您运行上面的代码片段，那么您会发现不同的输出。为什么他们不一样？正如我的假设所说，它应该是相等的，因为我skewX(30deg)在这两种情况下都使用过。

该matrix()功能实际上是如何工作的？

矩阵函数中的scaleX(), …