這篇文章將為大家詳細講解有關(guān)CSS3+JavaScript實現(xiàn)翻頁幻燈片效果的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家企業(yè)級云計算解決方案提供商,超15年IDC數(shù)據(jù)中心運營經(jīng)驗。主營GPU顯卡服務器，站群服務器，綿陽主機托管，海外高防服務器，大帶寬服務器，動態(tài)撥號VPS，海外云手機，海外云服務器，海外服務器租用托管等。

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡服務器，如Node.js。

先上效果圖

  
    
    
    
      *{
        margin: 0;
        padding: 0;
      }
      #content{
        width: 500px;
        height: 300px;
        margin: 40px auto;
        position: relative;
        transform-style: preserve-3d;
      }
      #content>div{
        width: 100%;
        height: 100%;
        position: absolute;
        transform-origin: center bottom;
      }
      #content img{
        width: 100%;
        height: 100%;
      }
      #next{
        position: absolute;
        top:190px;
        left: calc(33% - 60px);
      }
      #prev{
        position: absolute;
        top: 190px;
        left: calc(68% + 30px);
      }
      @keyframes next{  //創(chuàng)建一個動畫這是一個翻到下面的效果
        from{
          -wbelit-transform: perspective(1000px) rotateX(0deg); /* 開始位置是 0°*/
          opacity: 1; //初始透明為1
        }
        to{
          -webkit-transform: perspective(1000px) rotateX(-180deg); /*結(jié)束位置是 180°*/
          opacity: 0; //結(jié)束透明為0
        }
      }
      @keyframes prev{ //創(chuàng)建一個由上邊翻到上邊的動畫
        0%{
          -webkit-transform: perspective(1000px) rotateX(180deg); /* 初始開始位置 */
          opacity:0;    //初始為透明
        }
        57%
        {
          -webkit-transform: perspective(1000px) rotateX(-16deg); /* 動畫進行到 56% 的時候他為 -16° */
          opacity:1; //透明已經(jīng)為1 了
        }
        66%
        {
          -webkit-transform: perspective(1000px) rotateX(14deg); /* 再回到 14° 的位置 */
        }
        74%
        {
          -webkit-transform: perspective(1000px) rotateX(-12deg); /* 再回到 -12°的位置 */
        }
        81%
        {
          -webkit-transform: perspective(1000px) rotateX(10deg); /* 再回到 10°的位置 */
        }
        87%
        {
          -webkit-transform: perspective(1000px) rotateX(-8deg); /* 再回到 -8°的位置 */
        }
        92%
        {
          -webkit-transform: perspective(1000px) rotateX(6deg); /* 再回到 6° 的位置 */
        }
        96%
        {
          -webkit-transform: perspective(1000px) rotateX(-4deg); /* 再回到 -4° 的位置 */
        }
        100%
        {
          -webkit-transform: perspective(1000px) rotateX(0deg); /* 最后回歸 0° */
        }
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
      }
      .next{
        animation: next 1s ease 1 normal 0s; /* 執(zhí)行向下的動畫 */
        transform: rotateX(-180deg); /* 因為初始位置是0 但當你執(zhí)行完動畫還會回到原位 所以它轉(zhuǎn)到哪里就把他設(shè)在哪里不要再讓它回去了 */
        opacity: 0;
      }
      .prev{
        animation: prev 1.2s ease 1 normal 0s; /* 執(zhí)行向上的動畫 */
        transform: rotateX(0deg); /* 同上 */
        opacity: 1;
      }
    
  
  
    ←→