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

问题描述

两个形状完全一样的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 属性如果有多个值，是依次执行变换的。

就这么简单。