前言：之前我有寫過CSS3的transform這一這特性，對於它的用法，還不是很透徹，今天補充補充，呵呵 你懂的，小司機准備開車了。
a)再提一提transform的四個屬性
①旋轉--->rotate(參數a)，單位deg，表示旋轉角度，正數順時針，負數逆時針。
②縮放--->scale(參數a)，單位1，也就是“沒有單位”，赤裸裸的0-1之間的數字就行，表示為縮放比例。
③傾斜--->skew(參數a,參數b)，單位deg，兩個參數分別表示x,y方向上的傾斜角度，正數順時針，負數逆時針。
④移動--->translate(參數a)，單位px，移動方向是在div這個平面方向上(這樣說起來，應該有點難理解，放在四維坐標中，把div看做是任意一個平面來理解)，也有正數之分，正向前，負向後。
1)旋轉(rotate)，我們先來做一個文字的旋轉，就像下面這樣
/* HTML */ <div class="div1">我只是一個示例</div>
然後再給它寫點樣式
1 /* CSS */
3 .div1 {
4 width: 200px;
5 height: 50px;
6 font-size: 20px;
7 line-height: 50px;
8 text-align: center;
9 border: 1px solid;
10 margin: 100px auto;
11 -moz-transform: rotate(45deg);/* Firefox 旋轉屬性，參數表示角度(deg表示角度)，負數逆時針，正數順時針 */
12 -webkit-transform: rotate(45deg);/* Safari和Chrome */
13 -ms-transform: rotate(45deg);/* IE 9 */
14 -o-transform: rotate(45deg);/* Opera */
15 }
這是效果圖：下圖是一行文字，被順時針旋轉45度後的效果圖。
2）縮放(scale)
1 /* HTML */ 2 <div class="div2">我只是一個示例</div>
1 /* CSS */
2 .div2 {
3 width: 612px;
4 height: 408px;
5 font-size: 20px;
6 margin: 100px auto;
7 background: url(img/4.jpg);
8 -moz-transform: scale(0.5);/* 縮放屬性 ,參數表示縮放倍數，0-1之間 */
9 -webkit-transform: scale(0.5);
10 -ms-transform: scale(0.5);
11 -o-transform: scale(0.5);
12 }
這是效果圖：下圖表示，原圖和被縮小0.5倍後的效果圖
3）傾斜(skew)
1 /* HTML */ 2 <div class="div3">我只是一個示例</div>
1 /* CSS */
2 .div3 {
3 width: 412px;
4 height: 208px;
5 font-size: 20px;
6 margin: 100px auto;
7 background: url(img/4.jpg);
8 -moz-transform: skew(30deg, 30deg);/* 傾斜屬性，參數分別表示x,y方的傾斜角度，負數逆時針，正數順時針 */
9 -webkit-transform: skew(30deg, 30deg);
10 -ms-transform: skew(30deg, 30deg);
11 -o-transform: skew(30deg, 30deg);
12 }
這是效果圖：下圖表示一張正圖經過 x方向上順時針旋轉30度，y方向順時針旋轉30度後的效果。
4）移動(translate)
1 /* HTML */ 2 <div class="div4">我只是一個示例</div>
1 /* CSS */
2 .div4 {
3 width: 612px;
4 height: 408px;
5 font-size: 20px;
6 margin: 100px auto;
7 background: url(img/4.jpg);
8 -moz-transform: translate(100px);/* 移動屬性 ，移動方向是在div這個平面方向上，*/
9 -webkit-transform: translate(100px);
10 -ms-transform: translate(100px);
11 -o-transform: translate(100px);
12 }
我在寫的時候，這個移動，單一用的話，真看不出什麼效果，rbl。transform的四個屬性都寫了一遍，單一運用寫出來的效果真的不盡人意，下面我們直接把四個屬性組合起來，一起用，寫一個看著逼格稍稍高點的效果，以往看著別的網站有這個效果，當時
覺得真不錯，這兩天有時間就把它寫出來，呵呵，來看看吧！
5）整合：旋轉、縮放、傾斜和移動。
首先了，我們要先敲出一個水平方向上的水平面，看著有點像四維的咯！
1 /* HTML */ 2 <div class="div5">我只是一個示例</div>
1 /* CSS */
3 .div5 {
4 width: 612px;
5 height: 408px;
6 font-size: 20px;
7 color: #FFFFFF;
8 margin: 100px auto;
9 background: url(img/907878604.jpeg);
10 -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋轉-縮放-傾斜-移動 */
11 -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
12 -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
13 -o-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
14 box-shadow: -15px 7px 10px 3px #444;
15 float: left;
16 position: relative;
17 left: 30%;
18
19 }
看看效果，是有點丑了！呵呵，如果配上一個3D背景，我相信效果會更好，視覺效果會更強
下面我們再寫兩個，復制修改下代碼，再看看
1 /* HTML */ 2 <div class="div5_1">我只是一個示例</div> 3 <div class="div5_2">我只是一個示例</div>
1 /* CSS */
2 .div5_1 {
3 width: 612px;
4 height: 408px;
5 font-size: 20px;
6 color: #FFFFFF;
7 margin: 40px auto;
8 background: url(907878604.jpeg);
9 -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋轉-縮放-傾斜-移動 */
10 -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
11 -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
12 box-shadow: -15px 7px 10px 3px #444;
13 position: absolute;
14 left: 30%;
15 }
16 .div5_2 {
17 width: 612px;
18 height: 408px;
19 font-size: 20px;
20 color: #FFFFFF;
21 margin: -20px auto;
22 background: url(img/907878604.jpeg);
23 -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋轉-縮放-傾斜-移動 */
24 -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
25 -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
26 box-shadow: -15px 7px 10px 3px #444;
27 position: absolute;
28 left: 30%;
29 }
看著是不是空間感更強了，如果你細心研究，寫在頁面上的話，再加一些事件、色彩在它上面，我相信，視覺沖擊力就上來了。
總結：transform的幾個屬性用法就是這樣的，前端的各位特效，都是自己慢慢細心研究出來的，特效嘛，就像拍電影一樣，要投入時間和精力，你做出來的東西才會耳目一新，頁面給用戶的視覺感，色彩感才會更強。