H5中的3D轉換和幀動畫

Html5中的3D轉換和Css3動畫

（3）3D轉換

（3.1）rotateX

讓元素圍繞着X軸進行旋轉

（1）正值表示推到，負值表示鞠躬

（2）沒有透視的3D是看不出來方向

（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：值

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

（4）transform-style

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

tranform-style：值

值說明：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 類 （必填）和你想要的效果的類