三大王 transition : 過渡 , transform : 變形 , animation ： 動畫

　　　　1.transform 變形

　　　　　　任何的變形都可以被過渡 ， 一個transform寫多個用空格隔開 ，分開寫可能會被覆蓋,

　　　　　　想要實現3d效果要給父元素添加景深 eg: perspective:500px; perspective-origin

　　　　　　<1> transform: rotate(90deg)

　　　　　　　　 意思是順時針‘旋轉’ 90度 ， deg是單位度 可以是負數 , rotateX(45deg)x軸旋轉45度,正向後，負向前， rotateY 同理,配合 transform-origin:0% 0px; 兩個參數表示x ，y軸的最大景深

　　　　　　<2>transform:scale(0.1，0.1) 意思是縮放0.1倍 ，兩個參數分別是x，y軸的縮放倍數，也可以拆開寫 scaleX ，scaleY 、

　　　　　　<3>transform:skew(10deg,10deg) 意思是把元素斜切，好似把正方形變成平行四邊形 ，兩個參數分別是 x軸斜切的度數，y軸斜切的度數，也可以拆開寫 skewX，skewY

　　　　　<4>transform:translateX(300px); 意思是 從x軸 移動300px 還可以是 translateY ，Z

　　　　　　　　transform:translate3D(100px,200px,300px);

　　　　　<5> transform-style:preserve-3d;　　當一個組合體（內部有3D），自己要進行旋轉，那麽一定要加上這個屬性，加上之後內部的小元素的3D變化將保留

　　　　　　eg！：

　　　　　　　　　　背面不可見

　　　　　　　　　　像兩張撲克牌背靠背貼在一起，baby從-180 → 0 ， xiaoming從0 → 180

　　　　2.trasotion 過渡 值得註意的是 過渡需要準備時間！！

　　　　　　　　transition:all 1s ease 0s; 很簡單 效率高 很好用

　　　　3.animation

　　　　　使用動畫必須先@-webkit-keyframes 定義動畫 指的是關鍵幀 只需要定義初始樣和結果樣

　　　　　在一個元素內調用 animation

　　　　　　　　　　animation: GOGO 10s linear 0s 10 alternate forwards;

　　 // 參數GoGo 動畫的名字，自定義 ，10s 動畫的總共長度，linear動畫的緩存效果 ，os延遲時間，如果進行多次 僅第一次延時，10代表運動次數 infinite代表無限次 alternate代表是否來回運動，如果寫了就是要來回運動 ， forwards 代表運動後是否留在原地 ，寫了代表留在原地

　　　　動畫的定義1 ： 意思是動畫進行到多大程度產生變化

　　　　　@-webkit-keyframes GOGO{

　　　　　　0%{

　　　　　　　　　　// 這裏寫變化的量

　　　　　　}

　　　　　　50%{

　　　　　　}

　　　　　　100%{

　　　　　　}

　　　　}

　　　　動畫定義2 ：form to 從什麽變成什麽

　　　　　　@-webkit-keyframe GOGO{

　　　　　　　　form{

　　　　　　　　}

　　　　　　　　to{

　　　　　　　　}

　　　　　　}

css3 三大王 transition , transform , animation