變形–旋轉 rotate()
旋轉rotate()函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設定一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。如下圖所示：
HTML程式碼：
<div class="wrapper">
<div></div>
</div>
複製程式碼CSS程式碼：
.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
複製程式碼演示結果
變形–扭曲 skew()
扭曲skew()函式能夠讓元素傾斜顯示。它可以將一個物件以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函式的旋轉不同，rotate()函式只是旋轉，而不會改變元素的形狀。skew()函式不會旋轉，而只會改變元素的形狀。
Skew()具有三種情況：
1、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
第一個引數對應X軸，第二個引數對應Y軸。如果第二個引數未提供，則值為0，也就是Y軸方向上無斜切。
2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）
變形–縮放 scale()
縮放 scale()函式 讓元素根據中心原點對物件進行縮放。
縮放 scale 具有三種情況：
1、 scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
例如：
div:hover {
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5)
transform: scale(1.5,0.5);
}
複製程式碼注意：Y是一個可選引數，如果沒有設定Y值，則表示X，Y兩個方向的縮放倍數是一樣的。
2、scaleX(x)元素僅水平方向縮放（X軸縮放）
3、scaleY(y)元素僅垂直方向縮放（Y軸縮放）
HTML程式碼：
<div class="wrapper">
<div>我將放大1.5倍</div>
</div>
CSS程式碼：
.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .5;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform: scale(1.5);
}
複製程式碼變形–位移 translate()
translate()函式可以將元素向指定的方向移動，類似於position中的relative。或以簡單的理解為，使用translate()函式，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web元件。
translate我們分為三種情況：
1、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
2、translateX(x)僅水平方向移動（X軸移動）
3、translateY(Y)僅垂直方向移動（Y軸移動）
例項演示：通過translate()函式將元素向Y軸下方移動50px,X軸右方移動100px。
HTML程式碼：
<div class="wrapper">
<div>我向右向下移動</div>
</div>
複製程式碼CSS程式碼：
.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}
複製程式碼演示結果
變形–矩陣 matrix()
matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣，我在這裡只是簡單的說一下CSS3中的transform有這麼一個屬性值，如果需要深入瞭解，需要對數學矩陣有一定的知識。
變形–原點 transform-origin
任何一個元素都有一箇中心點，預設情況之下，其中心點是居於元素X軸和Y軸的50%處。如下圖所示：
在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。
transform-origin取值和元素設定背景中的background-position取值類似，如下表所示：
示例展示：
通過transform-origin改變元素原點到左上角，然後進行順時旋轉45度。
HTML程式碼：
<div class="wrapper">
<div>原點在預設位置處</div>
</div>
<div class="wrapper transform-origin">
<div>原點重置到左上角</div>
</div>
複製程式碼CSS程式碼：
.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}
複製程式碼演示結果：
動畫–過渡屬性 transition-property
早期在Web中要實現動畫效果，都是依賴於JavaScript或Flash來完成。但在CSS3中新增加了一個新的模組transition，它可以通過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是通過滑鼠的單擊、獲得焦點，被點選或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。
在CSS中建立簡單的過渡效果可以從以下幾個步驟來實現：
第一，在預設樣式中宣告元素的初始狀態樣式；
第二，宣告過渡元素最終狀態樣式，比如懸浮狀態；
第三，在預設樣式中通過新增過渡函式，新增一些不同的樣式。
CSS3的過度transition屬性是一個複合屬性，主要包括以下幾個子屬性：
● transition-property:指定過渡或動態模擬的CSS屬性
● transition-duration:指定完成過渡所需的時間
● transition-timing-function:指定過渡函式
● transition-delay:指定開始出現的延遲時間
先來看transition-property屬性
transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一箇中點值的屬性（需要產生動畫的屬性）才能具備過渡效果，其對應具有過渡的CSS屬性主要有：
HTML:
<div></div>
複製程式碼CSS:
div {
width: 200px;
height: 200px;
background-color:red;
margin: 20px auto;
-webkit-transition: background-color .5s ease .1s;
transition: background-color .5s ease .1s;
}
div:hover {
background-color: orange;
}
複製程式碼演示結果:
滑鼠移入
滑鼠移出
特別注意：當“transition-property”屬性設定為all時，表示的是所有中點值的屬性。
用一個簡單的例子來說明這個問題：
假設你的初始狀態設定了樣式“width”,“height”,“background”,當你在終始狀態都改變了這三個屬性，那麼all代表的就是“width”、“height”和“background”。如果你的終始狀態只改變了“width”和“height”時，那麼all代表的就是“width”和“height”。
動畫–過渡所需時間 transition-duration
transition-duration屬性主要用來設定一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續時間。
動畫–過渡函式 transition-timing-function
transition-timing-function屬性指的是過渡的“緩動函式”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函式：
案例展示：
在hover狀態下，讓容器從一個正方形慢慢過渡到一個圓形，而整個過渡是先加速再減速，也就是運用ease-in-out函式。
動畫–過渡延遲時間 transition-delay
transition-delay屬性和transition-duration屬性極其類似，不同的是transition-duration是用來設定過渡動畫的持續時間，而transition-delay主要用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行。
有時我們想改變兩個或者多個css屬性的transition效果時，只要把幾個transition的宣告串在一起，用逗號（“，”）隔開，然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點：第一個時間的值為 transition-duration，第二個為transition-delay。
例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}