为什么变换：倾斜（30度）；与变换不同：matrix(1,0,30,1,0,0);?

Question

比较以下两个代码片段-

.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(), skewY(), skewX(), scaleY(), translateX(),使用什么单位translateY()？Astransform: skew(30deg);和transform: matrix( skewX(30) );do 不给出相同的输出。

Answer 1

矩阵的使用并不像你想象的那么容易。我们不添加角度而是添加角度的切线：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
  transform: skew(30deg);
}

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

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

您可以在规范中找到更多详细信息：https : //www.w3.org/TR/css-transforms-1/#interpolation-of-2d-matrices

您还可以使用skew(30deg)查看矩阵值来检查元素的计算值：