3d的概念:

瀏覽器是2d空間只有x軸和y軸

瀏覽器形成3d空間就會多一條Z軸

形成3d空間屬性transform- style

flat???默認值??? 2d空間

preserve -3d形成3d空間多了Z軸

注意:要給父級添加此屬性

Eg：transform- style：preserve -3d

3d的位移屬性transform

功能函數(shù): translate(參數(shù))

translate(x,y)

translatex(參數(shù))

trans lateY(參數(shù))

translateZ(參數(shù))

translate3d(x,y,z)

景深效果

遠小近大

在父級元素上設置：perspective：1200px

在子級元素上設置：transform：perspective（1200px）

動畫

聲明@keyframes

一次from…to

多次百分比

調(diào)用animation：名稱 時間 方式 次數(shù)

Eg：名稱(hxb) 時間（3s） 方式（linear勻速） 次數(shù)（infinite 無限循環(huán)）

拓展：backface-visibility：hidden（背面不可見）

Step-start（不要運動的過程，只要結(jié)果）

Paused（暫停）