html - 为什么要变换 : skew(30deg); is not same as transform : 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()在矩阵函数中？如transform: skew(30deg);和transform: matrix( skewX(30) );不要给出相同的输出。

Answer 1

矩阵的使用并不像你想象的那么容易。我们不添加 Angular ，而是添加 Angular 正切:

.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) 检查元素的计算值以查看矩阵值: