一、CSS3 2D轉換
通過 CSS3 轉換，我們可以對元素進行移動、縮放、轉動、拉長或拉伸。
特別注意，我們在使用css3動畫效果時，必須給他們加相應的瀏覽器前綴，以便瀏覽器識別，讓我們更好的去應用它。
下面我給大家用一個小例子介紹一下各大瀏覽器的相應前綴：
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9(IE) */
-webkit-transform: rotate(30deg); /* Safari and Chrome(蘋果和谷歌) */
-o-transform: rotate(30deg); /* Opera (歐朋)*/
-moz-transform: rotate(30deg); /* Firefox（火狐） */
}
（1）translate() 方法：設置元素的移動。
transform:translate(50px,100px);(把元素從左側移動 50 像素，從頂端移動 100 像素。)
（2）rotate() 方法：設置元素的旋轉角度。（正值順時針，負值逆時針）
transform:rotate(30deg); （順時針旋轉 30 度。）
transform:rotate(-30deg);（逆時針旋轉 30 度。）
（3）scale() 方法：設置元素的尺寸增加或減少。
transform:scale(2,4);（第一個x值把寬度轉換為原始尺寸的 2 倍，第二個y值把高度轉換為原始高度的 4 倍。）
（4）skew() 方法：設置元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數。
transform:skew(30deg,20deg);（ 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。）
（5）matrix() 方法：會把所有2D 轉換方法組合在一起，它需要六個參數，可以將元素進行：旋轉、縮放、移動以及傾斜。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);（將 div 元素旋轉 30 度）
二、CSS3 3D轉換
（1）transform-origin 屬性：設置旋轉元素的基點位置。（它必須和transform屬性一同使用）
transform: rotate(45deg);//首先旋轉角度 transform-origin:20% 40%;//設置元素的基點位置（x，y）
語法：transform-origin: x y z;
x（可能的值） |
y（可能的值） |
z（可能的值） |
|
|
|
（2）transform-style 屬性：使被轉換的子元素保留其 3D 轉換。（也就是說：在 3D 空間中呈現被嵌套的元素。）（它也必須和transform屬性一同使用）
transform: rotateY(60deg);
transform-style: preserve-3d;
（3）perspective 屬性：設置元素被查看位置的視圖（透視）。（目前瀏覽器都不支持 perspective 屬性。）
perspective: 500;
（4）perspective-origin 屬性：設置 3D 元素的基點位置。
perspective:150;
perspective-origin: 10% 10%;
（5）backface-visibility 屬性：隱藏被旋轉的 div 元素的背面。
（大家可以聯想一下制作卡片的翻轉效果）
鏈接：http://www.zhangxinxu.com/study/201210/css3-animate-flip-example.html
backface-visibility:hidden;
語法：backface-visibility: visible（背面是可見的）|hidden（背面是不可見的）;
注意：2D與3D的區別——2D 轉換元素能夠改變元素 x 和 y 軸。3D 轉換元素還能改變其 Z 軸。
這邊我們為了更直觀的看看他們還有哪些設置方法~給大家獻上看一張圖~~
三、CSS3 過渡
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
（過渡效果是在鼠標指針浮到元素上時發生的效果。）
這邊我們要注意的是向要實現這一點，必須規定兩項內容：
- 規定您希望把效果添加到哪個 CSS 屬性上
- 規定效果的時長
（1）應用於寬度屬性的過渡效果，時長為 2 秒。
transition: width 2s;
注意：如果時長未規定，則不會有過渡效果，默認值為0。
（2）向元素的寬度、高度和轉換添加過渡效果。
transition: width 2s, height 2s, transform 2s;
//注意：如果我們需要向多個樣式添加過渡效果，就要用逗號隔開。
（3）transition-property 屬性：規定應用過渡的 CSS 屬性的名稱。
transition-property:width;
（4）transition-duration 屬性：定義過渡效果花費的時間。默認是 0。
transition-duration: 5s;
（5）transition-timing-function 屬性：以相同的速度從開始到結束的過渡效果。默認是 "ease"。
transition-timing-function: linear;
語法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
注意：這個屬性它可以設置不同的值，來改變其過渡效果的速度不同：
（6）transition-delay 屬性：規定在過渡效果開始之前需要等待的時間，以秒或毫秒計。默認是 0。
transition-delay: 2s;
希望對大家有所幫助~~~