變形：
transform：translate（50px,50px）
改變盒子位置，不會影響文檔流
transform：rotate（30deg）；旋轉(zhuǎn)
transform：scale (0.5,0.2) 縮放
transform：skew (0,45deg) 斜切
旋轉(zhuǎn)：
transform-style：preserve-3d ;設(shè)置3d模式
transform：perspective（800px）人眼可見 rotateY（0deg）旋轉(zhuǎn)角度
默認旋轉(zhuǎn)的角度是z軸
設(shè)置中心點
transform-origin：left center； 左中
具體設(shè)置數(shù)值的定中心：
transform-origin：50px 50px；
實現(xiàn)圖片的翻轉(zhuǎn)：
backface-visibility 設(shè)置盒子背面是否可見：hidden 隱藏背面不可見 visible 設(shè)置背面可見
perspective 設(shè)置透視距離 一般設(shè)置為800px
transform-style ： preserve-3d 設(shè)置盒子按3d空間顯示
translateX、translateY、translateZ 設(shè)置三維移動
rotateX、rotateY、rotateZ 設(shè)置三維旋轉(zhuǎn)
scaleX、scaleY、scaleZ 設(shè)置三維縮放
tranform-origin 設(shè)置變形的中心點
animation動畫：
@keyframes 定義關(guān)鍵幀動畫
定義動畫速度：
linear 勻速
ease 開始和結(jié)束慢速
ease-in 開始是慢速
ease-out 結(jié)束時慢速
ease-in-out 開始和結(jié)束時慢速
steps 動畫步數(shù)
animation-delay 動畫延遲
animation-duration 動畫時間
animation-name 動畫名稱
animation-iteration-count 動畫播放次數(shù) n? ?infinite
animation-play-state 動畫狀態(tài)
running? ? ? ? ?paused
animation-direction
normal 默認動畫結(jié)束不返回
Alternate 動畫結(jié)束后返回
animation-fill-mode 動畫前后的狀態(tài)
none 不改變默認行為
forwards 當動畫完成后，保持最后一個屬性值（在最后一個關(guān)鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內(nèi)，在動畫顯示之前，應(yīng)用開始屬性值（在第一個關(guān)鍵幀中定義）
both 向前和向后填充模式都被應(yīng)用
可以通過animation設(shè)置多個屬性? ?moving 移動? ?walking 跳動
多幀動畫：
@keyframes 定義關(guān)鍵幀動畫 通過%的形式分別設(shè)置運轉(zhuǎn)狀態(tài)，從而實現(xiàn)多幀
如：
@keyframes moving{
0%{
transform:translateY(0);
? ? ? ? background-color:red;
? ? }
50%{
transform:translateY(400px);
? ? ? ? background-color:greenyellow;
? ? ? ? border-radius:0;
? ? }
100%{
transform:translateY(0);
? ? ? ? background-color:rebeccapurple;
? ? ? ? border-radius:50px;
? ? }
}
瀏覽器樣式前綴
為了讓CSS3樣式兼容，需要將某些樣式加上瀏覽器前綴：
-ms- 兼容IE瀏覽器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
目前的狀況是，有些CSS3屬性需要加前綴，有些不需要加，有些只需要加一部分，這些加前綴的工作可以交給插件來完成，比如安裝： autoprefixer
