两个形状完全一样的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 无关
因为矩阵不满足交换率，即[A] [B] != [B] [A]比如你的手机正面向上
经过
1:向内反转，再向左翻转之后
屏幕朝向左。
2.向左翻转，再向内翻转之后
屏幕朝向你。
因为
transform属性如果有多个值，是依次执行变换的。就这么简单。