CSS3 transform的skew屬性值圖文詳解

我剛剛接觸transform的skew屬性值時一頭霧水，根本不知道種東西到底是咋變的。上網查，各個網站上也只說這個使用來做扭曲變換的，具體是咋變的就是不說。。。。無奈我只好自己研究了，現把研究結果共享一下。

首先說變換的時候坐標系是咋建的，如下圖（transform-origin:0px 0px;）。

 

既然skew(...)的括號里放的是坐標軸旋轉的角度，那么接下來說一下旋轉正方向的問題。y軸順時針轉為正，X軸逆時針轉為正。

之后圖形就可以確定了，因為兩軸的位置確定了，然后用仿射變換即可確定。

方法/步驟

1. skew屬性是個比較少用到的屬性，至少我用的比較少。

   用的好的話會讓你的網頁燁燁生輝，用不好的話，則是一大敗筆。

   

2. 現在就具體的介紹skew的用法：

   語法：transform:skew(<angle> [,<angle>]);

   包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。

   skewX(<angle>);表示只在X軸(水平方向)傾斜。

   skewY(<angle>);表示只在Y軸(垂直方向)傾斜。

3. 先放示例，效果如圖：

   

4. 現在我們來看參數為一個的情況：

   transform:skew(45deg);

   它等同於transform:skewX(45deg);

   可以看到demo標簽向左傾斜45度，產生變形。

   之所以會產生變形的，這是因為我給元素限定了高度為300px，所以只要傾斜的角度不為180°的倍數，他都會保持着300的高度，同時為了保持傾斜，只能拉長本身。（圍繞X軸傾斜，保持高度；圍繞Y軸傾斜，保留寬度。）

   若傾斜解讀為180的倍數，元素將不可見。

   

5. 參數值為一個的第二種情況：

   transform:skewX(45deg);【這個步驟就不說了，上面以提到】

   transform:skewY(45deg);

   效果如下圖

   

6. 再看看參數為2個的情況：

   transform:skew(45deg，45deg);

   此時元素將不可見，但實際上它應當在我畫的箭頭處。

   其實根據步驟4和5可以發現，當Y軸傾斜45度后，元素有了一個45°的銳角，而此時又向X軸傾斜，於是這個銳角正好被壓縮為0；於是形成了一個類似180°倍數的角。

   

7. 通過修改X軸的傾斜度數為44度，可以發現元素還是會露出一部分的，跟我上面箭頭畫的位置存在疑點偏移。

   
8. 8

   說明：目前skew無Z軸的傾斜，說不定以后會又該屬性。