旋轉(zhuǎn) rotate()
旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)使元素相對原點進行旋轉(zhuǎn)。它主要在二維空間內(nèi)進行操作，設(shè)置一個角度值，用來指定旋轉(zhuǎn)的幅度。如果這個值為正值，元素相對原點中心順時針旋轉(zhuǎn)；如果這個值為負值，元素相對原點中心逆時針旋轉(zhuǎn)
扭曲 skew()
扭曲skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會改變元素的形狀。skew()函數(shù)不會旋轉(zhuǎn)，而只會改變元素的形狀。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變形與動畫</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
.wrapper div span{
transform:skew(-45deg);
}
</style>
<body>
<div class="wrapper">
<div><span>我不想被扭曲(^_^)</span></div>
</div>
</body>
</html>
縮放 scale()
縮放 scale()函數(shù) 讓元素根據(jù)中心原點對對象進行縮放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變形與動畫</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
.wrapper div:hover{
transform:scale(0.8);
}
</style>
<body>
<div class="wrapper">
<div>我將縮小0.8</div>
</div>
</body>
</html>
位移 translate()
translate()函數(shù)可以將元素向指定的方向移動，類似于position中的relative。或以簡單的理解為，使用translate()函數(shù)，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
矩陣 matrix()
matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當(dāng)于直接應(yīng)用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學(xué)中的矩陣，我在這里只是簡單的說一下CSS3中的transform有這么一個屬性值，如果需要深入了解，需要對數(shù)學(xué)矩陣有一定的知識。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變形與動畫</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
.wrapper div{
transform:matrix(1,0,0,1,50,50);
}
</style>
<body>
<div class="wrapper">
<div></div>
</div>
</body>
</html>
原點 transform-origin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變形與動畫</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
.wrapper div{
transform-origin:right top;
}
</style>
<body>
<div class="wrapper">
<div>我修改原點之后在進行15度的扭曲</div>
</div>
</body>
</html>
過渡屬性 transition-property
早期在Web中要實現(xiàn)動畫效果，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的CSS事件來觸發(fā)元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是通過鼠標(biāo)的單擊、獲得焦點，被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動畫效果改變CSS的屬性值。
在CSS中創(chuàng)建簡單的過渡效果可以從以下幾個步驟來實現(xiàn)：
第一，在默認樣式中聲明元素的初始狀態(tài)樣式；
第二，聲明過渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)；
第三，在默認樣式中通過添加過渡函數(shù)，添加一些不同的樣式.
CSS3的過度transition屬性是一個復(fù)合屬性，主要包括以下幾個子屬性：
transition-property:指定過渡或動態(tài)模擬的CSS屬性
transition-duration:指定完成過渡所需的時間
transition-timing-function:指定過渡函數(shù)
transition-delay:指定開始出現(xiàn)的延遲時間
先來看transition-property屬性
transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一個中點值的屬性（需要產(chǎn)生動畫的屬性）才能具備過渡效果，其對應(yīng)具有過渡的CSS屬性主要有：
transition-timing-function
ransition-timing-function屬性指的是過渡的“緩動函數(shù)”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數(shù)：
Keyframes介紹
Keyframes被稱為關(guān)鍵幀，其類似于Flash中的關(guān)鍵幀。在CSS3中其主要以“@keyframes”開頭，后面緊跟著是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規(guī)則。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
在一個“@keyframes”中的樣式規(guī)則可以由多個百分比構(gòu)成的，如在“0%”到“100%”之間創(chuàng)建更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達到一種在不斷變化的效果。
經(jīng)驗與技巧：在@keyframes中定義動畫名稱時，其中0%和100%還可以使用關(guān)鍵詞from和to來代表，其中0%對應(yīng)的是from，100%對應(yīng)的是to。
瀏覽器的支持情況：
Chrome 和 Safari 需要前綴 -webkit-；Foxfire 需要前綴 -moz-。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變形與動畫</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
@keyframes changercolor{
0%{
background：red
}
20%{
background:blue;
}
40%{
background:orange;
}
80%{
background:red;
}
}
div:hover{
animation:changercolor 5s ease .1s
}
</style>
<body>
<div>鼠標(biāo)放在我身上</div>
</body>
</html>
CSS3中調(diào)用動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變形與動畫</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div><span></span></div>
</body>
</html>
@keyframes around{
0% {
transform: translateX(0);
}
25%{
transform: translateX(180px);
}
50%{
transform: translate(180px, 180px);
}
75%{
transform:translate(0,180px);
}
100%{
transform: translateY(0);
}
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
div span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
border-radius: 100%;
animation-name:around;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count:infinite;
}
CSS3中設(shè)置動畫播放時間
animation-duration: 5s;
設(shè)置動畫播放的方式
animation-timing-function:ease;
開始播放的時間
animation-delay:3s;
播放動畫的次數(shù)
animation-iteration-count屬性主要用來定義動畫的播放次數(shù)。
語法規(guī)則：
animation-iteration-count: infinite | <number> [, infinite | <number>]*
1、其值通常為整數(shù)，但也可以使用帶有小數(shù)的數(shù)字，其默認值為1，這意味著動畫將從開始到結(jié)束只播放一次。
2、如果取值為infinite，動畫將會無限次的播放。
舉例：
通過animation-iteration-count屬性讓動畫move只播放5次，代碼設(shè)置為：
animation-iteration-count:5;
注意：Chrome或Safari瀏覽器，需要加入-webkit-前綴！
設(shè)置動畫播放方向
animation-direction屬性主要用來設(shè)置動畫播放方向，其語法規(guī)則如下：
animation-direction:normal | alternate [, normal | alternate]*
其主要有兩個值：normal、alternate
1、normal是默認值，如果設(shè)置為normal時，動畫的每次循環(huán)都是向前播放；
2、另一個值是alternate，他的作用是，動畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。
例如：通過animation-direction屬性，將move動畫播放動畫方向設(shè)置為alternate，代碼為：
animation-direction:alternate;
注意：Chrome或Safari瀏覽器，需要加入-webkit-前綴！
CSS3中設(shè)置動畫的播放狀態(tài)
animation-play-state屬性主要用來控制元素動畫的播放狀態(tài)。
參數(shù)：
其主要有兩個值：running和paused。
其中running是其默認值，主要作用就是類似于音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放，這里的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。
例如，頁面加載時，動畫不播放。代碼如下：
animation-play-state:paused;
CSS3中設(shè)置動畫時間外屬性
animation-fill-mode屬性定義在動畫開始之前和結(jié)束之后發(fā)生的操作。主要具有四個
屬性值
none:默認值，表示動畫將按預(yù)期進行和結(jié)束，在動畫完成其最后一幀時，動畫會反轉(zhuǎn)到初始幀處
forwards:表示動畫在結(jié)束后繼續(xù)應(yīng)用最后的關(guān)鍵幀的位置
backwards:會在向元素應(yīng)用動畫樣式時迅速應(yīng)用動畫的初始幀
both:元素動畫同時具有forwards和backwards效果
在默認情況之下，動畫不會影響它的關(guān)鍵幀之外的屬性，使用animation-fill-mode屬性可以修改動畫的默認行為。簡單的說就是告訴動畫在第一關(guān)鍵幀上等待動畫開始，或者在動畫結(jié)束時停在最后一個關(guān)鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。
例如：讓動畫停在最一幀處。代碼如下：
animation-fill-mode:forwards;
