transform的顺序不同为何会使元素的形状不同。

Question

两个形状完全一样的div 设置了transform的三个值 但是三个值的顺序不同。所以产生的两个div的形状也不相同，原因是什么。
贴一个在线地址
http://sandbox.runjs.cn/show/r9sqhw5y

div {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 100px;
    height: 100px;
    background-color: blue;
    border: 1px solid red;
    transform: translate(10px) rotate(50deg) skew(20deg);
}
div.test {
    transform: skew(20deg) rotate(50deg) translate(10px);    
    left: 240px;
}

PS: 与 transform-origin 无关

Answer 1

因為矩陣不滿足交換率，即 [A] [B] != [B] [A]比如你的手機正面向上
經過
1:向內反轉，再向左翻轉之後
屏幕朝向左。
2.向左翻轉，再向內翻轉之後
屏幕朝向你。

Answer 2

因为 transform 属性如果有多个值，是依次执行变换的。

就这么简单。