問題描述

兩個形狀完全一樣的p 設(shè)置了transform的三個值 但是三個值的順序不同。所以產(chǎn)生的兩個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 無關(guān)

問題解答

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

因為 transform 屬性如果有多個值，是依次執(zhí)行變換的。

就這么簡單。