未倾斜的孩子未对齐

Note:这个问题是关于输出的问题，并且not关于创建任何形状。

我最近创建了一个形状：

.prog {
    position: relative;
    top: 20px;
    width: 150px;
    height: 120px;
    background: green;
    display: inline-block;
    transform: skewY(20deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}
.prog:before {
    content: "";
    position: absolute;
    left: 150px;
    width: 150px;
    height: 120px;
    background: red;
    transform: skewY(-40deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}

<div class="prog "></div>

在上面的代码片段中，绿色形状是.prog元素，并且是倾斜的。红色的形状是:before第一个元素的伪元素。

我歪了.prog（偏斜Y）至20°。现在，我需要:before为-20°。为此，我首先必须纠正它。然后再倾斜 20 度。
所以最后skewY值将为-40°。我应用了这个，并且适当transform-origins.

但问题是两个形状的顶点没有对齐。他们应该这样做，但事实并非如此。这是显示问题的图像：

黑线仅供参考。

现在更多！

我歪了-20 -20代替-40 :

transform: skewY(-20deg) skewY(-20deg); <--这有效！
transform: skewY(-40deg); <----------------这不！

“不偏斜”孩子的行为是正常的，这就是偏斜的运作方式。为了理解这一点，我将把问题简化为：

为什么不是skewX(40deg)与skewX(20deg) skewX(20deg)?

div {
    width: 100px; height: 100px;
    position:absolute;
    top:20px; left:20px;
    transform-origin: 0 0;
}
.d1 {
    transform: skewX(40deg);
    background: red;
    opacity:0.7;
}
.d2 {
    transform: skewX(20deg) skewX(20deg);
    background: blue;
    opacity:0.7;
}
/** FOR THE DEMO **/
body {background: url('https://i.stack.imgur.com/GySvQ.png');background-size: 10px;}
.m {text-align:right;padding-top:105px;}
.m1{width:83px;color:red;border-right:1px solid red;}
.m2 {width:72px;color:blue;border-right:1px solid blue;}
p{margin:0 0 5px 150px;color:red;}
.b{color:blue;}

<div class="d1"></div>
<div class="d2"></div>
<div class="m m1">x = 83</div>
<div class="m m2"><br/>x = 72</div>
<p class="r">skewX(40deg)</p>
<p class="b">skewX(20deg) skewX(20deg)</p>

注意：为了解释起见，我将使用100*100方形 div 且变换原点设置在该 div 的左上角。就像上面的代码片段一样。

为了理解这两种转换之间的区别，我们需要探索 CSS skew() 函数的工作方式。规格 http://www.w3.org/TR/css3-transforms/#SkewXDefined say :

A 2D skew transformation along the X axis with the parameter alpha is equivalent to the matrix:

所以这意味着我们可以计算 2D X 倾斜元素每个点的坐标，如下所示：

| 1 tan(α) | . | x |
| 0   1    |   | y |

• α 是 X 倾斜角度
• x/y变换前点的坐标

对于偏斜X(40deg)

α = tan(40deg) ~= 0.83

| 1  0.83 | . | 0   |   | 83  |
| 0  1    |   | 100 | = | 100 |

新坐标是x = 83如代码片段示例中所示。

对于 skewX(20deg) skewX(20deg)

α = tan(20deg) ~= 0.36

第一个倾斜：

| 1  0.36 | . | 0   |   | 36  |
| 0  1    |   | 100 | = | 100 |

第二个偏斜：

| 1  0.36 | . | 36  |   | 72  |
| 0  1    |   | 100 | = | 100 |

新坐标是x = 72如代码片段中所示。

结论

两种转换不会给出相同的结果。所以skewY(20deg) skewY(-40deg)与以下变换不同skewY(-20deg)并且红色和绿色元素的两个顶角无法对齐：

tan(20deg) != tan(40deg)/2 

参考 ：

• 数学挑战者的 CSS3 矩阵() 变换 http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
• CSS 变换倾斜：数学揭晓 http://davidesandona.it/tag/skew/
• CSS 转换模块级别 1 http://www.w3.org/TR/css3-transforms/