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 屬性如果有多個值，是依次執行變換的。

就這么簡單。