?3 D

（3.1）rotateY

圍繞著Y軸進(jìn)行旋轉(zhuǎn)

（1）正數(shù)是(站在右邊推)，負(fù)數(shù)是(站在左邊推)

（2.1）定義元素背過(guò)去是否可見

backface-visibility: visible|hidden;

?

說(shuō)明：visible表示可見，hidden表示不可見

測(cè)試貝塞爾曲線的網(wǎng)址：http://xuanfengge.com/easeing/ceaser/

（1）translateZ

就是在Z軸上來(lái)回移動(dòng)，但是如果沒(méi)有透視的情況下，完全看不出效果，所以，一般transform：translateZ（）都是配合透視一起使用

小經(jīng)驗(yàn)：translateZ和rotate結(jié)合會(huì)產(chǎn)生不一樣的3D效果，不同的順序的效果截然不同，如果先rotate?在translateZ?元素是在空間里面發(fā)生旋轉(zhuǎn) 而如果是translateZ在rotate?元素是在直線上發(fā)生旋轉(zhuǎn)。

正值是凸出，負(fù)值相反。

（2）透視?（景深）

perspective：值

　　

說(shuō)明：透視值越小，透視效果越強(qiáng)，值越大，透視效果越弱，透視添加在父級(jí)身上

（3）滅點(diǎn)（透視點(diǎn)，消失點(diǎn)）

perspective-origin：值

　　

就是3D懟的方向。

說(shuō)明：值可以是像素，也可以是百分比，還可以是方位名詞，默認(rèn)值是50%，50%（中心點(diǎn)）

（4）transform-style

作用：規(guī)定被嵌套元素如何在3D空間中顯示

tranform-style：值 preserve-3D

　　

值說(shuō)明：flat是默認(rèn)值，讓子元素不保留其3D位置，?preserve-3d??讓子元素保留其3D位置 ，加在父親身上

小總結(jié)：透視?滅點(diǎn)?transform-style都是添加在父級(jí)身上

關(guān)鍵：?當(dāng)元素發(fā)生3D翻轉(zhuǎn)的時(shí)候，整個(gè)坐標(biāo)系也跟著發(fā)生了翻轉(zhuǎn)！！

（5）css3的動(dòng)畫

animation:值

　　

?

?

值說(shuō)明：

（1）自定義動(dòng)畫名

（2）動(dòng)畫的持續(xù)時(shí)間 單位是s或者ms

（3）動(dòng)畫的曲線

（4）動(dòng)畫從何時(shí)開始

（5）控制動(dòng)畫執(zhí)行的次數(shù) ?沒(méi)有單位， 一直執(zhí)行：infinite

（6）控制動(dòng)畫是否逆序播放 ?默認(rèn)值normal ?逆序：alternate

（7）控制動(dòng)畫的播放和暫停 ?默認(rèn)值是播放：running ??暫停：paused

（8）動(dòng)畫最后的停留位置 ?forwards?讓動(dòng)畫停留在最后一幀

動(dòng)畫一定要先寫animation?然后搭配@keyframes去寫自定義的動(dòng)畫

@瀏覽器前綴keyframes 自定義的動(dòng)畫名{0%{//css語(yǔ)句}...100%{//css語(yǔ)句}}

例：

1 @keyframes laowang{ 2 0%{ 3 width:100px; 4 height:100px; 5 left:0; 6 transform:rotate(0deg); 7 } 8 50%{ 9 width:800px; 10 height:800px; 11 transform:rotate(720deg); 12 } 13 100%{ 14 width:500px; 15 height:500px; 16 left:800px; 17 transform:rotate(-720deg); 18 } 19 }

?

（4）幀動(dòng)畫

steps（幀數(shù)）

其實(shí)就是讓動(dòng)畫分成多少步去執(zhí)行，steps（）里面的數(shù)值是總畫面數(shù)?- 1?，在制作精靈圖的時(shí)候每個(gè)畫面的寬度盡量一致，并且建議在一行里面擺放

（5）animate.css庫(kù)的使用

官網(wǎng)：https://daneden.github.io/animate.css/

作用：將一切常見的動(dòng)畫直接封裝，開發(fā)者不需要考慮實(shí)現(xiàn)過(guò)程，只需要添加對(duì)應(yīng)的類就能實(shí)現(xiàn)動(dòng)畫效果

使用步驟：

（1）將下載下來(lái)的animate.css?引入到你的項(xiàng)目中

（2）去官網(wǎng)獲取想要的效果?給對(duì)應(yīng)的元素添加上animated?類 （必填）和你想要的效果的類

?

轉(zhuǎn)載于:https://www.cnblogs.com/litao666/p/6028858.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的CSS3基础03（3D②） 求粉丝的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。