一文搞懂transform: skew

目錄

• 理解座標系
• 複合變換

如何理解斜切 skew，先看一個 demo。在下面的 demo 中，有 4 個正方形，分別是

紅色：不作 skew 變換， 綠色：x 方向變換， 藍色：y 方向變換， 黑色：兩個方向都變換，

拖動下面的滑塊能夠查看改變 skew 角度後的效果。切換 selector 能夠設置 transform-origin，origin 默認是 0% 0%。你們能夠把玩一下。

若是你把滑塊拖到了 90deg 或者 - 90deg，那麼你應該能夠回答上面的問題了。若是你在 chrome 上看到整個頁面變白，能夠到隔壁 firefox 上試試，就這個 demo 而言，火狐是表現最好的, safari 最差。

<iframe height="543" style="width: 100%;" scrolling="no" title="skew" src="//codepen.io/imgss/embed/PoYmZEp/?height=543&theme-id=27057&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/imgss/pen/PoYmZEp/'>skew</a> by imgss (<a href='https://codepen.io/imgss'>@imgss</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

用左扭，右扭來理解 skew 可能更加符合咱們的直覺，可是倒是不許確的。拿綠色正方形來講，origin 在 0% 0% 時，skew 20 度看起來像是往右扭，可是 origin 變成 100% 100% 時，看起來又像是往左扭了。

那麼到底該怎麼理解這個 skew 變換呢，其實它是矩陣 matrix 變換的一種。關於矩陣變換，張鑫旭老師的這篇文章講解的不錯，傳送門，其中提到 skew 變化和通用 matrix 變換的對應關係：

也就是說 matrix 函數的第二三個參數來控制圖形的斜切的，更通用一點，下面這個圖展現了 css matrix 中的 6 個參數分別控制哪一種變換，咱們能夠看一下：

寫到 matrix 函數裏面以下：

有同窗問了，爲何沒有旋轉的參數啊，其實旋轉是 scale 和 skew 的組合操做。可是爲了保證旋轉後和原來的形狀保持一致，4 個參數應該存在以下關係：

換句話說，旋轉是一組特定的 scale + skew 組合操做。 <a name="理解座標系" id="理解座標系"><h2>理解座標系</h2></a>

在瞭解到 skew 實際上是一種矩陣變換後，咱們來了解一下瀏覽器裏的座標系。由於除了 transform，其餘操做都受座標原點的影響。在瀏覽器中，向下爲 Y 軸正方向，向右爲 x 軸正方向，惟獨原點是不肯定的，而這正是 transform-origin 所起的做用。 當你設置這個屬性爲 top left 時，就是說矩陣變換座標系的原點位於左上角，從而獲得圖形中的各個點的座標，經過矩陣運算獲得變換後的座標，最後由瀏覽器渲染出來。設置爲 50% 50% 則意味着座標原點在圖形的中心。 <a name="複合變換" id="複合變換"><h2>複合變換</h2></a>

思考下面兩行 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-%e7%9f%a9%e9%98%b5/ http://www.javashuo.com/article/p-rucapaya-hp.html https://www.jianshu.com/p/956d54376338

原文出處：https://www.cnblogs.com/imgss/p/11421248.html