一、景深

????- perspective 元素距離 視線的距離（物體和眼睛的距離越小，近大遠(yuǎn)小的效果越明顯）

????1.perspective: 1200px;（在父元素中使用）

????2.transform:perspective(1200px) （在子元素中使用）

????-二選一即可（一般用第一種）

二、3D

1.瀏覽器默認(rèn)的空間是2d空間，設(shè)置z軸的前提條件時(shí)讓瀏覽器形成3d空間

????-transform-style:flat(默認(rèn)值2d)/preserve-3d

2.位移

????-transform-translatez()：在z軸上移動(dòng)

????-transform-translate3d(x，y，z)

3.旋轉(zhuǎn)

????-transform-rotatez()：在z軸上旋轉(zhuǎn)（默認(rèn)）

????-transform-rotate3d(x，y，z的矢量值，角度值)

擴(kuò)展：backface-visibility：hidden（背面不可見(jiàn)）做3d時(shí)有些面是看不見(jiàn)的，可設(shè)置不可見(jiàn)

三、關(guān)鍵幀動(dòng)畫(huà)

1.條件：

????-需要聲明幀動(dòng)畫(huà)

????????-在css樣式表中聲明

????????????-@keyframs 動(dòng)畫(huà)的名字{動(dòng)畫(huà)的運(yùn)動(dòng)方式}

????????????????-第一種：?jiǎn)未芜\(yùn)動(dòng)方式：@keyframes mymove{from{初始狀態(tài)屬性} to{結(jié)束狀態(tài)屬性} }

? ? ? ? ? ? ? ? -第二種：多次運(yùn)動(dòng)方式： @keyframes mymove{0%{初始狀態(tài)屬性}50%（中間再可以添加關(guān)鍵幀）100%{結(jié)束狀態(tài)屬性} }

????-調(diào)用動(dòng)畫(huà)

? ? ? ? -使用動(dòng)畫(huà)的屬性調(diào)用，哪個(gè)屬性移動(dòng)就給哪個(gè)屬性添加動(dòng)畫(huà)

? ? -屬性（簡(jiǎn)寫(xiě)：animation：name（名稱(chēng)） duration（持續(xù)時(shí)間）?timing-function（動(dòng)畫(huà)頻率）?delay（延緩時(shí)間）infinite（定義循環(huán)方式為無(wú)限循環(huán)）?alternate（定義動(dòng)畫(huà)方式） ）

? ? ? ? -animation-name

? ? ? ? -animation-duration

? ? ? ? -animation-timing-function

? ? ? ? -animation-delay

? ? ? ? -animation-iteration-count

? ? ? ? -animation-direction

? ? ? ? -animation-play-state??

? ? ? ? -擴(kuò)展：step-start：省略開(kāi)始和結(jié)束之間的運(yùn)動(dòng)間隙可替代linear（勻速）屬性值，實(shí)現(xiàn)動(dòng)畫(huà)絲滑

2.注意：

? ? ? ? -動(dòng)畫(huà)需要結(jié)合定位屬性使用

? ? ? ? -起始和結(jié)束的位置屬性一定要相同

3.總結(jié)

? ? ? ? -相同點(diǎn)：可以控制元素在瀏覽器中移動(dòng)

? ? ? ? -不同點(diǎn)：過(guò)渡需要人為控制（hover）刷新，動(dòng)畫(huà)可自行播放