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

Question

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

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

PS: 与 transform-origin 无关

Answer 1

Because the matrix does not meet the exchange rate, that is, [A] [B] != [B] [A] For example, if your phone is facing up
after
1: flip inward, and then flip to the left
The screen faces left.
2. Flip it to the left and then inward.
The screen faces you.

Answer 2

Because if the transform attribute has multiple values, the transformation is performed sequentially.

It’s that simple.