如何理解斜切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(1,tan(θy),tan(θx),1,0,0) // 對應於 skew(θx + "deg"，θy+ "deg")也就是說matrix函數的第二三個參數來控制圖形的斜切的，更通用一點，下面這個圖展示了 css matrix 中的6個參數分別控制哪種變換，我們可以看一下：
寫到matrix函數裏面如下：
matrix(SCALE_X, SKEW_Y, SKEW_X, SCALE_Y, TRANS_X, TRANS_Y)有同學問了，爲什麼沒有旋轉的參數啊，其實旋轉是scale和skew的組合操作。但是爲了保證旋轉後和原來的形狀保持一致，4個參數應該存在如下關係：
matrix(cosθ,sinθ,-sinθ,cosθ,0,0) // rotate(θ)換句話說，旋轉是一組特定的scale + skew組合操作。
理解座標系
在瞭解到skew其實是一種矩陣變換後，我們來了解一下瀏覽器裏的座標系。因爲除了transform，其他操作都受座標原點的影響。在瀏覽器中，向下爲Y軸正方向，向右爲x軸正方向，唯獨原點是不確定的，而這正是transform-origin所起的作用。
當你設置這個屬性爲top left時，就是說矩陣變換座標系的原點位於左上角，從而得到圖形中的各個點的座標，通過矩陣運算得到變換後的座標，最後由瀏覽器渲染出來。設置爲50% 50%則意味着座標原點在圖形的中心。
複合變換
思考下面兩行css:
transform: rotate(45deg) skew(20deg,20deg)
transform: skew(20deg,20deg) rotate(45deg)對兩個個正方形分別做上述變換，出來的效果是不同的，原因是因爲上面兩個操作，相當於對座標進行兩次矩陣乘法運算，不同於普通的乘法運算，矩陣乘法運算是不存在交換率的，所以結果會不同。
參考文章：
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-%e7%9f%a9%e9%98%b5/
https://blog.csdn.net/u012964944/article/details/77824768
https://www.jianshu.com/p/956d54376338