?3 D

（3.1）rotateY

圍繞著Y軸進行旋轉

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

（2.1）定義元素背過去是否可見

backface-visibility: visible|hidden;

?

說明：visible表示可見，hidden表示不可見

測試貝塞爾曲線的網址：http://xuanfengge.com/easeing/ceaser/

（1）translateZ

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

小經驗：translateZ和rotate結合會產生不一樣的3D效果，不同的順序的效果截然不同，如果先rotate?在translateZ?元素是在空間里面發生旋轉 而如果是translateZ在rotate?元素是在直線上發生旋轉。

正值是凸出，負值相反。

（2）透視?（景深）

perspective：值

　　

說明：透視值越小，透視效果越強，值越大，透視效果越弱，透視添加在父級身上

（3）滅點（透視點，消失點）

perspective-origin：值

　　

就是3D懟的方向。

說明：值可以是像素，也可以是百分比，還可以是方位名詞，默認值是50%，50%（中心點）

（4）transform-style

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

tranform-style：值 preserve-3D

　　

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

小總結：透視?滅點?transform-style都是添加在父級身上

關鍵：?當元素發生3D翻轉的時候，整個坐標系也跟著發生了翻轉！！

（5）css3的動畫

animation:值

　　

?

?

值說明：

（1）自定義動畫名

（2）動畫的持續時間 單位是s或者ms

（3）動畫的曲線

（4）動畫從何時開始

（5）控制動畫執行的次數 ?沒有單位， 一直執行：infinite

（6）控制動畫是否逆序播放 ?默認值normal ?逆序：alternate

（7）控制動畫的播放和暫停 ?默認值是播放：running ??暫停：paused

（8）動畫最后的停留位置 ?forwards?讓動畫停留在最后一幀

動畫一定要先寫animation?然后搭配@keyframes去寫自定義的動畫

@瀏覽器前綴keyframes 自定義的動畫名{0%{//css語句}...100%{//css語句}}

例：

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）幀動畫

steps（幀數）

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

（5）animate.css庫的使用

官網：https://daneden.github.io/animate.css/

作用：將一切常見的動畫直接封裝，開發者不需要考慮實現過程，只需要添加對應的類就能實現動畫效果

使用步驟：

（1）將下載下來的animate.css?引入到你的項目中

（2）去官網獲取想要的效果?給對應的元素添加上animated?類 （必填）和你想要的效果的類

?

轉載于:https://www.cnblogs.com/litao666/p/6028858.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。