空間位移
Z軸
1.Z軸的正方向?yàn)槠聊坏饺说难劬Φ姆较颍?br>
2.Z軸取值跟XY一樣蛙酪，像素和百分比鸟整，當(dāng)取值為百分比時(shí)候也是參照自身作位移
3.Z軸語法：transfom：translateZ(300px);
或 transform:translate3d(100px,100px,300px);
4.translate后面沒有3d，是不可以有3個(gè)值誉券，即為XY值指厌，translate3d才有XYZ值
5.網(wǎng)頁默認(rèn)顯示是2d的，看不到3d效果的
Perspective視距
1.透視踊跟，視距踩验，景深 設(shè)置給使用了3d元素的最近一級(jí)的父元素（親爸爸）
2.添加視距 取值范圍：400~1200px pp
3.視距理解：其實(shí)就是安排了一直眼睛，然后眼睛到屏幕的距離就是視距
4.近大遠(yuǎn)猩堂怠：像素越大箕憾，代表屏幕離眼睛越近，圖片在瀏覽器就呈現(xiàn)放大拳昌；像素越小袭异，代表屏幕離眼睛越遠(yuǎn)，圖片在瀏覽器就呈現(xiàn)縮小炬藤。
空間旋轉(zhuǎn)
Z軸
1.順時(shí)針旋轉(zhuǎn)扁远，rotate（360deg）和rotateZ（360deg）等價(jià)
transform：translateZ(360deg);和transform:translate(360deg)效果一樣
2.逆時(shí)針旋轉(zhuǎn)，rotate（-360deg）和rotateZ（-360deg）等價(jià)
transform：translateZ(-360deg);和transform:translate(-360deg)效果一樣
X軸刻像，Y軸
1.X軸旋轉(zhuǎn)180deg畅买，當(dāng)加上視距后perspective后，后出現(xiàn)圖片垂直鏡像细睡；
2.Y軸旋轉(zhuǎn)180deg谷羞，當(dāng)加上視距后perspective后，后出現(xiàn)圖片水平鏡像溜徙；
3.在立體空間中湃缎，1個(gè)點(diǎn)和1條線是不占據(jù)位置大的，所以當(dāng)旋轉(zhuǎn)X或Y軸旋轉(zhuǎn)90度蠢壹，圖片會(huì)消失
3D導(dǎo)航欄
當(dāng)cursor hover到的首頁,登錄,注冊(cè)等盒子時(shí),綠色盒子會(huì)進(jìn)行翻轉(zhuǎn)為橙子的index,login,register盒子
1.根據(jù)case,寫出靜態(tài)布局
a.一個(gè)30040大盒子位于瀏覽器垂直50px且水平居中位置;
b.大盒子內(nèi)有ul>li3>a*2----即3個(gè)li盒子包著2個(gè)a標(biāo)簽;
c.分別在各個(gè)a標(biāo)簽填充上內(nèi)容:首頁 index 登錄 login 注冊(cè) register;
d.把li盒子的布局填充進(jìn)大盒子;
2.進(jìn)行3D布局,讓橙色的盒子覆蓋住綠色的盒子 ;
a,讓橙子盒子沿著Y軸正方向平移60px ;
b,同時(shí)沿著X軸正方向旋轉(zhuǎn)90度,讓index盒子和首頁盒子呈現(xiàn)立體T字狀,可以開啟上帝上角查看兩個(gè)盒子狀態(tài);
d. /* 開啟3d /
transform-style: preserve-3d;
/ 開啟上帝視角嗓违，通過旋轉(zhuǎn)(ps) */
transform: rotateX(-20deg) rotateY(30deg);
3.然后讓綠色盒子沿著Z的正方向平移橙子盒子的一半;
4.同過鼠標(biāo)懸停,讓index橙色盒子旋轉(zhuǎn)回原來的位置覆蓋綠色盒子
左手法則:左手大拇指所指向的方向?yàn)樾D(zhuǎn)軸心,四指所曲方向?yàn)樾D(zhuǎn)方向
動(dòng)畫
動(dòng)畫實(shí)現(xiàn)步驟
1.定義動(dòng)畫：讓寬度從200變大到600
a. @keyframes(關(guān)鍵幀) 動(dòng)畫名稱(自定義) {
初始狀態(tài)
from {width:200px;}
結(jié)束狀態(tài)
to {width:600px;}
}
b.在要實(shí)現(xiàn)動(dòng)畫效果的盒子里面條用動(dòng)畫animation
animation:動(dòng)畫名稱(已自定義好的名字) 動(dòng)畫時(shí)長(秒數(shù));
2.定義動(dòng)畫 百分比可以實(shí)現(xiàn)階段性的動(dòng)畫
a. @keyframes(關(guān)鍵幀) 動(dòng)畫名稱(自定義) {
初始狀態(tài)
0%{width:200px;height:100px:}
中間狀態(tài)
50%{width:500px;height:300px;}
結(jié)束狀態(tài)
100%{width:800px;height:500px;}
}
b.在要實(shí)現(xiàn)動(dòng)畫效果的盒子里面條用動(dòng)畫animation
animation:動(dòng)畫名稱(已自定義好的名字) 動(dòng)畫時(shí)長(秒數(shù));
3.note first:
a.動(dòng)畫的名稱不能重復(fù);
b.可參與過渡的css屬性都可以參與動(dòng)畫;
c.動(dòng)畫的名稱不能為running, 因?yàn)樗顷P(guān)鍵詞,vscode的固有代碼
d.如果調(diào)用該動(dòng)畫的盒子樣式和動(dòng)畫初始狀態(tài)是一樣的話,初始狀態(tài)可以不寫
4.note second:
調(diào)用動(dòng)畫:animation: name duration timing-function delay iteration-count direction fill-mode;
a.名字:(自定義)
b.期間/動(dòng)畫時(shí)長:2s
c.計(jì)時(shí)功能:linear(勻速) 或者steps(次數(shù)):逐幀動(dòng)畫
d.delay:延遲時(shí)間：動(dòng)畫開始之間要等待的時(shí)間 s/ms
e.iteration-count:動(dòng)畫播放次數(shù)：infinite 無限次播放
f:direction:動(dòng)畫播放方向：alternate(反方向)交替播放
g:fill-mode:執(zhí)行完畢時(shí)狀態(tài)-------forwards:(最后一幀)動(dòng)畫停止在結(jié)束時(shí)的狀態(tài); backwards(第一幀)
速度曲線：默認(rèn) ease； 1. linear 勻速播放 2. steps(次數(shù))一般配合精靈圖使用
執(zhí)行完畢時(shí)的狀態(tài)：forwards 動(dòng)畫會(huì)停在動(dòng)畫結(jié)束時(shí)的狀態(tài)图贸；
注意點(diǎn)：
動(dòng)畫名稱和播放一次動(dòng)畫的時(shí)長必須寫蹂季，其他屬性需要就寫
forwards不能和infinite結(jié)合使用冕广，否則不生效
animation 里面屬性值 不分先后順序
當(dāng)屬性值里有兩個(gè)時(shí)間，第一個(gè)時(shí)間永遠(yuǎn)表示動(dòng)畫時(shí)長偿洁，第二個(gè)表示等待時(shí)間
精靈動(dòng)畫案例
1.打開圖片資源,查看UI給出的圖片;
2.計(jì)算共有多少個(gè)動(dòng)作,一個(gè)動(dòng)作為一幀;
3.按上述計(jì)算出第一幀的盒子寬高為140*140,插入背景圖片,即可在瀏覽器實(shí)現(xiàn)一個(gè)動(dòng)作
