目錄
如何理解斜切 skew，先看一個 demo。在下面的 demo 中，有 4 個正方形，分別是
紅色：不做 skew 變換，
綠色：x 方向變換，
藍色：y 方向變換，
黑色：兩個方向都變換，
拖動下面的滑塊可以查看改變 skew 角度后的效果。切換 selector 可以設置 transform-origin，origin 默認是 0% 0%。大家可以把玩一下。
如果你把滑塊拖到了 90deg 或者 - 90deg，那么你應該可以回答上面的問題了。如果你在 chrome 上看到整個頁面變白，可以到隔壁 firefox 上試試，就這個 demo 而言，火狐是表現最好的, safari 最差。
用左扭，右扭來理解 skew 可能更加符合我們的直覺，但是卻是不准確的。拿綠色正方形來說，origin 在 0% 0% 時，skew 20 度看起來像是往右扭，但是 origin 變成 100% 100% 時，看起來又像是往左扭了。
那么到底該怎么理解這個 skew 變換呢，其實它是矩陣 matrix 變換的一種。關於矩陣變換，張鑫旭老師的這篇文章講解的不錯，傳送門，其中提到 skew 變化和通用 matrix 變換的對應關系：
也就是說 matrix 函數的第二三個參數來控制圖形的斜切的，更通用一點，下面這個圖展示了 css matrix 中的 6 個參數分別控制哪種變換，我們可以看一下：
寫到 matrix 函數里面如下：
有同學問了，為什么沒有旋轉的參數啊，其實旋轉是 scale 和 skew 的組合操作。但是為了保證旋轉后和原來的形狀保持一致，4 個參數應該存在如下關系：
換句話說，旋轉是一組特定的 scale + skew 組合操作。
理解坐標系
在了解到 skew 其實是一種矩陣變換后，我們來了解一下瀏覽器里的坐標系。因為除了 transform，其他操作都受坐標原點的影響。在瀏覽器中，向下為 Y 軸正方向，向右為 x 軸正方向，唯獨原點是不確定的，而這正是 transform-origin 所起的作用。
當你設置這個屬性為 top left 時，就是說矩陣變換坐標系的原點位於左上角，從而得到圖形中的各個點的坐標，通過矩陣運算得到變換后的坐標，最后由瀏覽器渲染出來。設置為 50% 50% 則意味着坐標原點在圖形的中心。
復合變換
思考下面兩行 css:
對兩個個正方形分別做上述變換，出來的效果是不同的，原因是因為上面兩個操作，相當於對坐標進行兩次矩陣乘法運算，不同於普通的乘法運算，矩陣乘法運算是不存在 ** 交換率 ** 的，所以結果會不同。
參考文章：
https://www.cnblogs.com/TianFang/p/3920734.html
https://code-industry.net/masterpdfeditor-help/transformation-matrix/
https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩陣/
https://blog.csdn.net/u012964944/article/details/77824768
https://www.jianshu.com/p/956d54376338