2D概念
轉換是CSS3中具有颠覆性的特征之一，可以實作元素的位移、旋轉、變形、縮放，甚至支援矩陣方式，配合即将學習的過渡和動畫知識，可以取代大量之前隻能靠Flash才可以實作的效果。
2D 動畫要是使用 transform 屬性來實作文字或圖像的的各種變形效果，如位移、縮放、旋轉、傾斜等。
transform屬性變形方法：
1.translate()：位移
将元素沿着水準方向（X軸）和垂直方向（Y軸）移動
translateX(x)：元素僅在水準方向移動（X軸移動）
translateY(y)：元素僅在垂直方向移動（Y軸移動）
transklate(x,y)：元素在水準方向和垂直方向同時移動（X軸和Y軸同時移動）
案例示例：
div:hover{
/*設定兩個值，第一個參數表示X方向 第二個參數表示Y方向*/
/*transform: translate(100px,100px);*/
/*也可以隻傳入一個參數，表示X方向*/
/*transform: translate(100px);*/
/*也可以指定具體的方向,如下代碼，表示Y方向正值方向上移動100px*/
transform:translateY(100px);
}
2.scale()：縮放
将元素根據中心原點進行縮放。跟translate()方法一樣
scaleX(x)：元素僅水準方向縮放（X軸縮放）
scaleY(y)：元素僅垂直方向縮放（Y軸縮放）
scale(x,y)：元素水準方向和垂直方向同時縮放（X軸和Y軸同時縮放）
案例示例：
div:hover{
/*傳入兩個值，第一個參數表示X方向的縮放 第二個參數表示Y方向上的縮放*/
/*transform: scale(2,0.5);*/
/*也可以隻傳入一個值，表示X方向和Y方向上相同的縮放*/
/*transform: scale(2);*/
/*也可以指定具體方向上的縮放*/
transform: scaleX(2);
}
3.rotate()：旋轉
将元素相對中心原點進行旋轉。這裡的旋轉是二維的，不涉及三維空間的操作
例如：transform:rotate(30deg);順時針旋轉30度
案例示例：
div:hover{
/*傳入旋轉的角度，如果正值，則進行順時針旋轉*/
/*transform: rotate(90deg);*/
/*如果傳入負值，則逆時針旋轉*/
transform: rotate(-270deg);
}
4.skew()：傾斜
和translate()方法、scale()使用方法相同
skewX(x)：使元素在水準方向傾斜（X軸傾斜）
skewY(y)：使元素在垂直方向傾斜（Y軸傾斜）
skew(x,y)：使元素在水準方向和垂直方向同時傾斜（X軸和Y軸同時傾斜）
案例示例：
div:hover{
/*在X方向上傾斜30度*/
transform: skewX(30deg)；
}
5.matrix()
matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。
transform 綜合使用
例如：transform:rotate(30deg) translateX(100px) transform-origin:right center;
transform-origin: 允許你改變被轉換元素的位置。
案例示例：
div{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: red;
/*添加過渡*/
transition:all .5s;
/*設定縮放的中心，預設是元素中心位置,現修改為元素左上角*/
transform-origin: 0px 0px;
}
div:hover{
transform: scale(2);
}
過渡
作用：
在某個時間段可以顯示css中某個屬性值的變化過程。
文法：
transition:：屬性 時間；
其參數的取值說明如下：
<transition-property>:定義用于過渡的屬性；
<transition-duration>:定義過渡過程需要的時間（必選，否則不會産生過渡效果）
<transition-delay>:定義開始過渡的延遲時間；
<transition-timing-function>:定義過渡的方式；
1.指定過渡的屬性 ( transition-property屬性 )
transition-property的文法：transition-property：none | all | ;
其取值說明如下：
none：表示沒有任何CSS屬性有過渡效果；
all：為預設值，表示所有的CSS屬性都有過渡效果；
<property>：指定一個用逗号分隔的多個屬性，針對指定的這些屬性有過渡效果。
2.指定過渡的時間（transition-duration屬性）
transition-duration文法：transition-duration: time;
其取值說明：
time指定一個用逗号分隔的多個時間值，機關是秒(s)或毫秒(ms)。預設值是0，即是看不到過渡效果。
3.指定過渡延遲時間（transition-delay屬性）
transition-delay文法：transition-delay:time;
其取值說明：
time的取值可以為秒(s)或毫秒(ms)。預設值為0，即是沒有時間延遲，立即開始過渡效果。
4.指定過渡方式（transition-timing-function屬性）
transition-timing-function文法：transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubiz-bezier(n,n,n,n);
其取值的說明如下：
linear: 表示勻速過渡；
ease: 預設值，表示過渡的速度先慢，再快，最後非常慢；
ease-in: 表示過渡的速度先慢，後越來越快，直至結束；
ease-out: 表示過渡的速度先快，後越來越慢，直至結束；
ease-in-out: 表示過渡的速度在開始和結束時都很慢；
cubic-bezier(n,n,n,n): 自定義貝塞爾曲線的效果，其中的四個參數為從0到1的數字。
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)