CSS：動畫

旋轉（動畫）：屬性多個之間能夠用空格隔開；默認是圍繞中心點旋轉；

transform(變形)：rotate(45deg);順時針旋轉（從左到右）//默認是圍繞Z軸 旋轉

                          transform:scale(水平方向 垂直方向）);可正可負；scalex().scaley();放大/縮小；

                            translate(100px);位移//translate(100px,100px);//translateY(100px);可正可負；

                        transform:skew(deg);扭曲，變形

                    transform:matrix();//矩陣

transform-origin:50px 50px;(座標旋轉)；top left（點旋轉）；

transition(過渡):transform(想要發生過渡的屬性，all全部的屬性) 過渡完成的時間（2s） 過渡的效果（linear線性的）;多個能夠用逗號隔開；

Eg:小三角旋轉,飛入效果

陰影

box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距離） #0f0（顏色）;

(谷歌,蘋果)-webkit-box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距離） #0f0（顏色）;

（火狐）-moz-box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距離） #0f0（顏色）;

(ie8之後)-ms-box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距離） #0f0（顏色）;

（opera）-o-box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距離） #0f0（顏色）;

px是相對單位，在不一樣的設備上不同；

透明度：父元素設置opacity:子元素也會有opacity,而且去不掉子元素的opacity，能夠用rgba （）

transition過渡(一個狀態到另外一個狀態,中間無其餘變化)

transition:過渡的屬性 時間 ease（過渡的方式） 延遲時間；

分開寫

transition-property:

transition-duration:

transition-timing-function:

transition-delay:

animation動畫（複雜變化）

幀：1s最少有24幀；圖片組成的；

動畫必需要有關鍵幀

關鍵幀  @-webkit-keyframes  bigger(名字){

{ 時間的百分比}     0%{

發生變化1的屬性

}

50%{

發生變化2的屬性

}

100%{

發生變化3的屬性

}

}

調用：animation: bigger  3s linear;

調用：animation: bigger  3s linear forwards(最後停在最後一幀)   4（動畫執行的次數【infinite無限次】）;//

animation-name:

animation-duration:持續時間

animation-timing-function:

.....

transfrom(3d):

視角的距離：perspective：；屬性給父元素加的，多層作3d變化(也只能用一個perspective,，能夠給最高級的父級加perspective，下面的父親加transform-style：preserve-3d;(保持3d))

面試：先旋轉後位移/位移再旋轉的結果：不同

旋轉時所在座標軸也會發生變化

perspective-origin(視角原點):50% 50%（默認值（平視） x y）

transform-style：preserve-3d;(保持3d)