2D：
變形屬性：transform:
位移
旋轉(zhuǎn)
縮放
傾斜
背面不可見(jiàn)
變形原點(diǎn)
transform-origin:x y;
景深：
會(huì)當(dāng)凌絕頂 ，一覽眾山小
橫看成嶺側(cè)成峰甸饱，遠(yuǎn)近高低各不同
不畏浮云遮望眼质涛，只緣身在最高層
近大遠(yuǎn)小惨远，視覺(jué)，視角
景深：模擬近大遠(yuǎn)小的視覺(jué)效果
perspective:; 值越大表示離得越遠(yuǎn)饥瓷，通常的數(shù)值在900-1200之間
放在父元素上面
perspective-origin: 控制視角
left top 往左上角看
right top 往右上角看
程序中實(shí)現(xiàn)的方法 perspective 元素距離 視線的距離（物體和眼睛的距離越小伙狐，近大遠(yuǎn)小的效果越明顯）
perspective: 1200px;（在父元素中使用）
transform:perspective(1200px) （在子元素中使用）
兩個(gè)都設(shè)置會(huì)發(fā)生沖突涮毫，建議只設(shè)置父元素，通常的數(shù)值在900-1200之間
如果當(dāng)你的視線距離物體足夠遠(yuǎn)的時(shí)候贷屎，基本上就不會(huì)有近大遠(yuǎn)小的感覺(jué)
perspective-origin
觀察3d元素的（位置）角度
perspective-origin：center center （中心）
perspective-origin：left top （左上角）
perspective-origin：100% 100% （右下角）
3D ： 立體空間
形成一個(gè)3D空間（3D舞臺(tái)）
transform-style:preserve-3d; (放在父元素上面)
2d場(chǎng)景罢防，在屏幕上水平和垂直的交叉線x軸和y軸
3d場(chǎng)景，在垂直于屏幕的方法唉侄，相對(duì)于3d多出個(gè)z軸
Z軸：靠近屏幕的方向是正向咒吐，遠(yuǎn)離屏幕的方向是反向
transform-style屬性
transform-style屬性是3D空間一個(gè)重要屬性，指定嵌套元素如何在3D空間中呈現(xiàn)。他主要有兩個(gè)屬性值：flat和preserve-3d
其中flat值為默認(rèn)值渤滞，表示所有子元素在2D平面呈現(xiàn)贬墩。preserve-3d表示所有子元素在3D空間中呈現(xiàn)。
也就是說(shuō)妄呕，如果對(duì)一個(gè)元素設(shè)置了transform-style的值為flat陶舞，則該元素的所有子元素都將被平展到該元素的2D平面中進(jìn)行呈現(xiàn)。沿著X軸或Y軸方向旋轉(zhuǎn)該元素將導(dǎo)致位于正或負(fù)Z軸位置的子元素顯示在該元素的平面上绪励，而不是它的前面或者后面肿孵。如果對(duì)一個(gè)元素設(shè)置了transform-style的值為preserve-3d，它表示不執(zhí)行平展操作疏魏，他的所有子元素位于3D空間中停做。
3D位移
CSS3中的3D位移主要包括translateZ()和translate3d()兩個(gè)功能函數(shù)；
translate3d(tx,ty,tz)
+ ty：代表縱向坐標(biāo)位移向量的長(zhǎng)度大莫；
+ tx：代表橫向坐標(biāo)位移向量的長(zhǎng)度蛉腌；
+ tz：代表Z軸位移向量的長(zhǎng)度。此值不能是一個(gè)百分比值只厘，如果取值為百分比值烙丛，將會(huì)認(rèn)為無(wú)效值
translateZ(t)
+ 指的是Z軸的向量位移長(zhǎng)度
3D旋轉(zhuǎn)
**CSS3中的3D旋轉(zhuǎn)主要包括
rotateX()
rotateY()
rotateZ()
rotate3d()
四個(gè)功能函數(shù)**
+ rotateX(a)
+ rotateX()函數(shù)指定一個(gè)元素圍繞X軸旋轉(zhuǎn)，旋轉(zhuǎn)的量被定義為指定的角度羔味；如果值為正值河咽，元素圍繞X軸順時(shí)針旋轉(zhuǎn)；反之赋元，如果值為負(fù)值忘蟹，元素圍繞X軸逆時(shí)針旋轉(zhuǎn)。
+ rotateY(a)
+ rotateY()函數(shù)指定一個(gè)元素圍繞Y軸旋轉(zhuǎn)搁凸，旋轉(zhuǎn)的量被定義為指定的角度媚值；如果值為正值，元素圍繞Y軸順時(shí)針旋轉(zhuǎn)坪仇；反之杂腰，如果值為負(fù)值，元素圍繞Y軸逆時(shí)針旋轉(zhuǎn)椅文。
+ rotateZ(a)
+ rotateZ()函數(shù)和其他兩個(gè)函數(shù)功能一樣的，區(qū)別在于rotateZ()函數(shù)指定一個(gè)元素圍繞Z軸旋轉(zhuǎn)
+ rotate3d(x,y,z,a)(建議取值0或1)
+ x：是一個(gè)0到１之間的數(shù)值惜颇，主要用來(lái)描述元素圍繞X軸旋轉(zhuǎn)的矢量值皆刺；
+ y：是一個(gè)０到１之間的數(shù)值，主要用來(lái)描述元素圍繞Y軸旋轉(zhuǎn)的矢量值凌摄；
+ z：是一個(gè)０到１之間的數(shù)值羡蛾，主要用來(lái)描述元素圍繞Z軸旋轉(zhuǎn)的矢量值；
+ a：是一個(gè)角度值锨亏，主要用來(lái)指定元素在3D空間旋轉(zhuǎn)的角度痴怨，如果其值為正值忙干，元素順時(shí)針旋轉(zhuǎn)，反之元素逆時(shí)針旋轉(zhuǎn)浪藻。
3D縮放
3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個(gè)功能函數(shù)
CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數(shù)
當(dāng)scale3d()中X軸和Y軸同時(shí)為1捐迫，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)
通過(guò)使用3D縮放函數(shù)爱葵，可以讓元素在Z軸上按比例縮放默認(rèn)值為１施戴，當(dāng)值大于１時(shí)，元素放大萌丈，反之小于１大于0.01時(shí)赞哗，元素縮小
-
scale3d()
- sx：橫向縮放比例；
- sy：縱向縮放比例辆雾；
- sz：Z軸縮放比例肪笋；
-
scaleZ(s)
- s：指定元素每個(gè)點(diǎn)在Z軸的比例。
注：scaleZ()和scale3d()函數(shù)單獨(dú)使用時(shí)沒(méi)有任何效果度迂，需要配合其他的變形函數(shù)一起使用才會(huì)有效果
2D位移：
transform:translate(x,y)
translateX()
translateY()
3D位移：
transform:translate3d(x,y,z)
transform:translateZ(); 正值往前涂乌、負(fù)值往后
2D旋轉(zhuǎn)：
transform:rotate()
transform:rotateX()
transform:rotateY()
3D旋轉(zhuǎn)：
transform:rotateZ(deg)
transform:rotate3d(x,y,z,deg度數(shù))
參數(shù)x,y,z是一個(gè)矢量值 0 代表不旋轉(zhuǎn)、1代表旋轉(zhuǎn) 0.6
解釋：x,y,z矢量值 繪制一個(gè)點(diǎn)英岭，繪制出得這個(gè)點(diǎn)湾盒，和變形原點(diǎn)形成一條線，這條線就是旋轉(zhuǎn)得軸
2D縮放：
transform:scale()
transform:scaleX()
transform:scaleY()
3D縮放：
transform:scale3d(X,Y,Z)
transform:scaleZ();
旋轉(zhuǎn)得正負(fù)值
繞著X軸：
如果元素往后躺诅妹。正值
如果元素往前趴罚勾。負(fù)值
繞著Y軸：
如果元素往右側(cè)轉(zhuǎn)。正值
如果元素往左側(cè)轉(zhuǎn)吭狡。負(fù)值
位移得正負(fù)值：
X軸位移：
右移 正
左移 負(fù)
Y軸位移：
上 負(fù)
下 正
Z軸位移：
前 正
后 負(fù)
3D場(chǎng)景得實(shí)現(xiàn)：
transform-style:preserve-3d
3D位移 3D旋轉(zhuǎn)
css3-動(dòng)畫：
不去任何事件觸發(fā)尖殃，能自動(dòng)執(zhí)行。
制作關(guān)鍵幀：
語(yǔ)法：
@keyframes 關(guān)鍵幀名稱{
from{}
to{}
}
常用方法：
@keyframes 關(guān)鍵幀的名稱{
0%{
//動(dòng)畫開(kāi)始狀態(tài)
}
20%{
}
40%{
}
60%{
}
100%{
//動(dòng)畫結(jié)束狀態(tài)
}
}
調(diào)用關(guān)鍵幀：
animation: 復(fù)合屬性（簡(jiǎn)寫形式）
animation:
關(guān)鍵幀名稱（自定義）
動(dòng)畫執(zhí)行的時(shí)間（秒s 毫秒 ms）
動(dòng)畫的延遲時(shí)間（秒s 毫秒 ms）
動(dòng)畫的類型：linear(勻速) step-start (跳到每一個(gè)關(guān)鍵幀)
動(dòng)畫的次數(shù)：直接寫次數(shù) 3 划煮、5 無(wú)限循環(huán) infinite
動(dòng)畫的方向：反向運(yùn)動(dòng)（reverse） 交替運(yùn)動(dòng)（alternate）
先反后正（alternate-reverse）
讓動(dòng)畫停在最后一幀：forwards
動(dòng)畫的狀態(tài)：
animation-play-state:
running 運(yùn)動(dòng)
paused 暫停
css3關(guān)鍵幀：
@keyframes 關(guān)鍵幀名稱{
from{
//需要做動(dòng)畫效果的css屬性
margin-left:0;
}
to{
margin-left:200px;
}
}
@keyframes 關(guān)鍵幀名稱{
0%{
}
//增加任意關(guān)鍵幀
100%{
}
}
steps(參數(shù)1送丰，參數(shù)2)
參數(shù)1：把動(dòng)畫分成幾個(gè)階段
參數(shù)2：end/start 默認(rèn)是end 不顯示最后一幀。
