第一次嘗試著寫博客，不好或者有誤的地方希望大家多多指正吶，今天主要寫的是關于CSS3的一個重要屬性transform的一些用法，這些例子是之前在慕課網上學習某位老師的課程后自己敲的。
一、前言
1. transform是什么？
transform的含義是：改變，使....變形；轉換
2. transform的常見屬性有哪些？
transform的屬性包括： translate()/rotate() / skew() / scale() /，分別還有x、y之分，比如：rotatex() 和 rotatey() ，以此類推。
transform:translate()
含義：變動，位移；例如向右位移20像素，向上位移50像素（向左向下為負值） 實例如下
.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}
transform:rotate()
含義：旋轉；“deg”是表示旋轉的度數 例如“180deg”表示旋轉“180度” 實例如下
.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
transform:skew()
含義：傾斜 實例如下
.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale()
含義：比例 1.8表示以1.8的比例放大 如果是放大整數倍如放大3倍 必須寫成3.0 實例如下
.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}
3. transform的實例
demo01 說明：鼠標移入后 圖片左移 內容依次進入
步驟：
1.寫好html代碼并通過css設置好內容和圖片的初始樣式（文字內容都在圖片上）；
2.將描述內容通過transform屬性位移到左側 看不到為止（transform:translate(-600px,0);）；
3.接下來設置鼠標移入時(:hover)的樣式 同樣是利用transform 使內容左移的距離為0（transform:translate(0,0)）這里用到transition-delay屬性主要是為了讓三個內容分別延遲不同的時間 形成依次進入的效果。
/*圖片左移 文字依次進入*/
.test1{background: #fff;}
.test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(-600px,0px);}
.test1 figcaption{padding:20px}
.test1:hover figcaption p{transform: translate(0,0);}
.test1 figcaption p:nth-of-type(1){transition-delay: 0.2s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.3s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.4s;}
.test1:hover img{transform: translate(-5px,0);}
<!--移動-->
<figure class="test1">
<img src="img/altimg05.jpg">
<figcaption>
<h2>圖片標題</h2>
<p>這里是圖片的相關描述內容</p>
<p>這里是圖片的相關描述內容</p>
<p>這里是圖片的相關描述內容</p>
</figcaption>
</figure>
demo02 說明：鼠標移入后 圖片變模糊 矩形從圖片外旋轉進入圖片中指定位置 文字從右側飛過來 并逐漸顯示
步驟：
1.寫好html代碼并通過css設置好內容和圖片的初始樣式（矩形文字都在圖片上）；
2.將矩形通過transform屬性位移到上方 看不到為止 并設置旋轉的角度為0 transform: translate(0,-400px) rotate(0deg)；
3.接下來設置鼠標移入時(:hover)的樣式 位移設置為0并旋轉360度 transform: translate(0,0) rotate(360deg);
/*旋轉*/
.test2{background: #ccc;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h2{margin:15% 0 0 15%}
.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}
.test2 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);}
.test2:hover figcaption div{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}
<!--旋轉-->
<figure class="test2">
<img src="img/altimg05.jpg">
<figcaption>
<h2>圖片標題</h2>
<p>飛來飛去</p>
<div></div>
</figcaption>
</figure>