【CSS3動畫】transform對文字及圖片的旋轉、縮放、傾斜和移動

前言：之前我有寫過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>

然后再給它寫點樣式

/* CSS */
　　　　.div1 {
                width: 200px;
                height: 50px;
                font-size: 20px;
                line-height: 50px;
                text-align: center;
                border: 1px solid;
                margin: 100px auto;
                -moz-transform: rotate(45deg);/* Firefox 旋轉屬性，參數表示角度(deg表示角度)，負數逆時針，正數順時針 */                
                -webkit-transform: rotate(45deg);/* Safari和Chrome */
                -ms-transform: rotate(45deg);/* IE 9 */
                -o-transform: rotate(45deg);/* Opera */
            }

?

這是效果圖：下圖是一行文字，被順時針旋轉45度后的效果圖。

?

2）縮放(scale)

/* HTML */
<div class="div2">我只是一個示例</div>

/* CSS */
　　　　.div2 {
                width: 612px;
                height: 408px;
                font-size: 20px;
                margin: 100px auto;
                background: url(img/4.jpg);
                -moz-transform: scale(0.5);/* 縮放屬性 ,參數表示縮放倍數，0-1之間 */                
                -webkit-transform: scale(0.5);
                -ms-transform: scale(0.5);
                -o-transform: scale(0.5);
            }

這是效果圖：下圖表示，原圖和被縮小0.5倍后的效果圖

? ? ?

　　　　　　　

?

3）傾斜(skew)

/* HTML */
<div class="div3">我只是一個示例</div>

/* CSS */
　　　　.div3 {
                width: 412px;
                height: 208px;
                font-size: 20px;
                margin: 100px auto;
                background: url(img/4.jpg);
                -moz-transform: skew(30deg, 30deg);/* 傾斜屬性，參數分別表示x,y方的傾斜角度，負數逆時針，正數順時針 */    
                -webkit-transform: skew(30deg, 30deg);    
                -ms-transform: skew(30deg, 30deg);
                -o-transform: skew(30deg, 30deg);
            }

這是效果圖：下圖表示一張正圖經過 x方向上順時針旋轉30度，y方向順時針旋轉30度后的效果。

?

4）移動(translate)

/* HTML */
<div class="div4">我只是一個示例</div>

/* CSS */
　　　　　.div4 {
                width: 612px;
                height: 408px;
                font-size: 20px;
                margin: 100px auto;
                background: url(img/4.jpg);
                -moz-transform: translate(100px);/* 移動屬性 ，移動方向是在div這個平面方向上，*/                
                -webkit-transform: translate(100px);
                -ms-transform: translate(100px);
                -o-transform: translate(100px);
            }

我在寫的時候，這個移動，單一用的話，真看不出什么效果，單一運用寫出來的效果真的不盡人意，下面我們直接把四個屬性組合起來，一起用，寫一個看著逼格稍稍高點的效果，以往看著別的網站有這個效果，當時

覺得真不錯，這兩天有時間就把它寫出來，呵呵，來看看吧！

?

5）整合：旋轉、縮放、傾斜和移動。

首先了，我們要先敲出一個水平方向上的水平面，看著有點像四維的咯！

/* HTML */
<div class="div5">我只是一個示例</div>

/* CSS */
　　　　.div5 {
                width: 612px;
                height: 408px;
                font-size: 20px;
                color: #FFFFFF;
                margin: 100px auto;
                background: url(img/907878604.jpeg);
                -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋轉-縮放-傾斜-移動 */
                -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
                -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
                -o-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
                box-shadow: -15px 7px 10px 3px #444;
                float: left;
                position: relative;
                left: 30%;
                
            }

看看效果，是有點丑了！呵呵，如果配上一個3D背景，我相信效果會更好，視覺效果會更強

?

下面我們再寫兩個，復制修改下代碼，再看看

/* HTML */
<div class="div5_1">我只是一個示例</div>
<div class="div5_2">我只是一個示例</div>

/* CSS */
　　　.div5_1 {
                width: 612px;
                height: 408px;
                font-size: 20px;
                color: #FFFFFF;
                margin: 40px auto;
                background: url(907878604.jpeg);
                -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋轉-縮放-傾斜-移動 */
                -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
                -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
                box-shadow: -15px 7px 10px 3px #444;
                position: absolute;
                left: 30%;
            }
    .div5_2 {
                width: 612px;
                height: 408px;
                font-size: 20px;
                color: #FFFFFF;
                margin: -20px auto;
                background: url(img/907878604.jpeg);
                -moz-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);/* 旋轉-縮放-傾斜-移動 */
                -webkit-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
                -ms-transform: rotate(-17deg) scale(0.5) skew(67deg) translate(0px);
                box-shadow: -15px 7px 10px 3px #444;
                position: absolute;
                left: 30%;
            }

?

看著是不是空間感更強了，如果你細心研究，寫在頁面上的話，再加一些事件、色彩在它上面，我相信，視覺沖擊力就上來了。

?

總結：transform的幾個屬性用法就是這樣的，前端的各種特效，都是自己慢慢細心研究出來的，特效嘛，就像拍電影一樣，要投入時間和精力，你做出來的東西才會耳目一新，頁面給用戶的視覺感，色彩感才會更強。這是關于CSS3的動畫、陰影的一個地址，可以參考學習下http://www.css3maker.com/

?

?

交流群:192713488