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

html5 • • 问答

比较以下两个代码片段-

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

.box1 {
  margin: 100px;
  transform: skew(30deg);
}
<div></div>

回答

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

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

.box2 {
  transform: matrix(1, 0, .577, 1, 0, 0);
}
<div></div>
<div></div>

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

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

以上是为什么变换：倾斜（30度）；与变换不同：matrix(1,0,30,1,0,0);?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容