css3中-webkit-transform 的 skew 如何使用？

看到有技術文章里說，「-webkit-transform：skew（30deg，30deg）使該元素水平方向縮小了50%，垂直方向放大一倍」這是為什麼？

未使用 skew：

使用 skew：

從字面上理解 skew 是傾斜的意思，為什麼使用 skew 從視覺上看感覺 DOM 被拉伸了？

-----問題補充說明--------

我的意思是，為什麼設為(30deg,30deg)是「水平方向縮小了50%，垂直方向放大一倍」，這是怎麼計算的？DOM 如何拉伸？

原諒我的渣圖

怎麼拉伸？沿什麼方向拉伸？

---

skew（我習慣稱作斜切）本來就是拉伸。

題主是不是用實物的傾斜去類別？那叫旋轉（rotate）。

skew(30deg,30deg)是在xy兩個方向傾斜30deg。

這兒有別人現成的demo，上面有兩個控制項，可以很直觀地感受一下：

CSS3 transform matrix矩陣與拉伸

---

這個skew的默認transform-origin是這個物件的中心點，所以題主你的補充說明裡的圖，坐標軸的中心點應該是在方塊的中心。

skew確實有拉伸的效果

可以參見這三幅圖（transform: All the CSS3 properties explained）

這是skewX(30deg)

skewY(30deg)

加在一起的效果就是

題主你拿紙筆畫一下就更清楚了

---

不理解skew工作原理的最大障礙，就是skew所用的坐標系，縱向是X軸，橫向是Y軸，與常見的坐標系是反著的。比如：

skewX(30deg) 表示X軸朝逆時針方向旋轉30deg，坐標繫上的物體也會隨著X軸旋轉。

skewY(30deg) 表示Y軸朝順時針方向旋轉30deg，坐標繫上的物體也會隨著Y軸旋轉。

---

猛戳這裡，http://zhuanlan.zhihu.com/p/22665223看我這個文章我覺得解決了這個問題

---

推薦閱讀：