寫這篇文章是因為在一個前端QQ群里，網友 “小豆豆” （應他要求要出現他的網名......） ，問skew的角度怎么算，因為他看了很多文章還是不能理解skew的原理。於是，我覺得有必要寫個博文，幫助那些不懂的人，讓他們看了此文就懂。
進入正題：
先說明下，電腦屏幕的XY軸跟我們平時所說的直角坐標系是不一樣的。如下圖：
圖上的盒子就是代表我們的電腦屏幕，原點就是屏幕的左上角，豎直向下為X軸正方向，水平向右為Y軸正方向。
1、傾斜skew
先看圖
每個圖下方都有skew的參數。粗的紅色的線分別是水平垂直方向上的投影，其長度與左邊的未傾斜的邊是相等的。而兩個參數所代表的角度，就是圖中黑色標記的角。從上面我們也可以看出來：skewx是代表與X軸傾斜的角度，方向是逆時針；skewY是代表與Y軸傾斜的角度，方向是順時針。
但是要注意的是，例如當用skew(60,60)的時候，角度的算法不是上面那樣的呢，因為當兩個參數的角度都大於45的時候，其實我們看到的是圖形的反面，也就是長和寬交換了位置。我們可以看圖片上的MyDiv確實是倒的。
此時黃色的才才是投影的矩形，可以和左邊的原圖進行比較。而原來的粗的紅色的線是錯的，錯的，錯的！！！多說幾遍先。而角度則是黑色的標出來的！
其他角度，大家也可以去推一推。
需要說明的是skew的默認原點 transform-origin 是這個物件的中心點。這也是我在第二行有一條橘黃色的細線，是為了尋找中心點，然后獲取投影。
如果上面的你不能理解，就看我畫的投影，首先知道角度是怎么標記的，然后記住這么一句話：不管它是一個方向傾斜，還是兩個方向一起傾斜，最后的在X,Y軸上的投影長度是不變的，也就是參數都為 0 時候的長度。但是投影要注意旋轉的角度。為了保持投影長度不變，所以就得拉長圖形，也就是變形。所以如果你想通過動手實驗的話，是得不出上面的結果，因為實際的不會變形。
如果你真的懂了，用手就可以畫出最后的結果的。
2、旋轉rotate
用法：
transform: rotate(45deg);
共一個參數“角度”，單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉，上述代碼作用是順時針旋轉45度。
rotate()默認旋轉中心為圖片的中點
我以前用rotate寫過一個時鍾，獲取電腦當前時間，然后顯示，開始計時，具體如下圖：
源碼參見我很早之前寫的：javascript實例——時間日期篇
還有rotateX，rotateY是，這個動手操作下就能理解，記得旋轉中心是圖形的中心。
rotateX體驗效果 rotateY體驗效果 rotate效果體驗
3、縮放 scale
用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);
參數表示縮放倍數；
- 一個參數時：表示水平和垂直同時縮放該倍率
- 兩個參數時：第一個參數指定水平方向的縮放倍率，第二個參數指定垂直方向的縮放倍率。
需要注意的是，scale不看XY軸，而是看水平豎直的。具體可看下面的示例：
以上三個分別是scale(1,1)；scale(0.5,2)；scale(1.1,1.1);
4、移動 translate
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);
參數表示移動距離，單位px，
- 一個參數時：表示水平方向的移動距離；
- 兩個參數時：第一個參數表示水平方向的移動距離，第二個參數表示垂直方向的移動距離。
這個比較簡單就不多說了，跟relative的屬性有點像。它也是不看XY軸的。
translateX水平移動體驗 translateY豎直移動體驗 translate效果體驗
組合
上面我們介紹了使用transform對元素進行旋轉、縮放、傾斜、移動的方法，這里講介紹綜合使用這幾個方法來對一個元素進行多重變形。
用法：
transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
這四種變形方法順序可以隨意，但不同的順序導致變形結果不同，原因是變形的順序是從左到右依次進行，這個用法中的執行順序為1.rotate 2.scalse 3.skew 4.translate
參考文章：
2、CSS3屬性transform詳解之（旋轉:rotate,縮放:scale,傾斜:skew,移動:translate）