這篇文章主要為大家展示了“如何使用css實現3D圖像輪轉效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用css實現3D圖像輪轉效果”這篇文章吧。

專注于為中小企業提供成都網站制作、成都網站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業圖們免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了上千企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

首先看html文件，div.billboard為效果的容器，利用10個div.poster分割圖像，每個poster中有三個face，分別用來承載三個圖像。

XML/HTML Code復制內容到剪貼板

<div class="billboard">     
    <div class="poster">     
        <div class="face panel1 p1"></div>     
        <div class="face panel2 p1"></div>     
        <div class="face panel3 p1"></div>     
    </div>     
    <div class="poster">     
        <div class="face panel1 p2"></div>     
        <div class="face panel2 p2"></div>     
        <div class="face panel3 p2"></div>     
    </div>     
    <div class="poster">     
        <div class="face panel1 p3"></div>     
        <div class="face panel2 p3"></div>     
        <div class="face panel3 p3"></div>     
    </div>     
    <div class="poster">     
        <div class="face panel1 p4"></div>     
        <div class="face panel2 p4"></div>     
        <div class="face panel3 p4"></div>     
    </div>     
    <div class="poster">     
        <div class="face panel1 p5"></div>     
        <div class="face panel2 p5"></div>     
        <div class="face panel3 p5"></div>     
    </div>     
    <div class="poster">     
        <div class="face panel1 p6"></div>     
        <div class="face panel2 p6"></div>     
        <div class="face panel3 p6"></div>     
    </div>     
    <div class="poster">     
        <div class="face panel1 p7"></div>     
        <div class="face panel2 p7"></div>     
        <div class="face panel3 p7"></div>     
    </div>     
    <div class="poster">     
        <div class="face panel1 p8"></div>     
        <div class="face panel2 p8"></div>     
        <div class="face panel3 p8"></div>     
    </div>     
    <div class="poster">     
        <div class="face panel1 p9"></div>     
        <div class="face panel2 p9"></div>     
        <div class="face panel3 p9"></div>     
    </div>     
    <div class="poster">     
        <div class="face panel1 p10"></div>     
        <div class="face panel2 p10"></div>     
        <div class="face panel3 p10"></div>     
    </div>     
</div>

CSS文件這里我們用到了sass，用的是scss語法。

CSS Code復制內容到剪貼板

//變量初始化     
//圖像分塊個數，如要更改，html需要進行相應的修改     
$numPoster:10;      
     
//輪換圖像個數，如要更改，html需要進行相應的修改     
$numFace:3;      
     
//圖像寬度      
$width:600px;      
     
//圖像高度      
$height:320px;      
     
//盒子的設置     
.billboard {       
    width:$width;       
    margin:100px auto;       
}      
     
//圖像條左浮動      
.poster {       
    float:left;       
    width:$width/$numPoster;       
    height:$height;       
}     
     
//圖像條面的統一設置，絕對定位、3d動畫設置       
.face {       
    position:absolute;       
    height:$height;       
    width:$width/$numPoster;       
    transform-origin:50% 50% -17px;       
    backface-visibility: hidden;       
    transform-style:preserve-3d;       
    perspective:350px;       
}       
     
//圖像條面分別設置背景圖像、動畫     
@for $i from 1 through $numFace{       
  .poster .panel#{$i} {       
    background:url(http://gx.zptc.cn/whqet/img/#{$i}.jpg);       
    transform:transformY(360deg/$numFace*($i - 1));       
    animation: rotateMe#{$i} 10s infinite;       
  }       
  @keyframes rotateMe#{$i} {       
    0% {       
        transform:rotateY(360deg/$numFace*($i - 1));       
    }       
    9% {       
        transform:rotateY(360deg/$numFace*($i - 1));       
    }       
    24% {       
        transform:rotateY(360deg/$numFace*($i));       
    }       
    42% {       
        transform:rotateY(360deg/$numFace*($i));       
    }       
    57% {       
        transform:rotateY(360deg/$numFace*($i + 1));       
    }       
    75% {       
        transform:rotateY(360deg/$numFace*($i + 1));       
    }       
    90% {       
        transform:rotateY(360deg/$numFace*($i + 2));       
    }       
    100% {       
        transform:rotateY(360deg/$numFace*($i + 2));       
    }       
  }       
}      
     
//圖像條面的背景偏移     
@for $i from 1 through $numPoster {       
  .poster .p#{$i} {background-position:-($width/$numPoster*($i - 1)) top;}       
}

以上是“如何使用css實現3D圖像輪轉效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

本文題目：如何使用css實現3D圖像輪轉效果
文章路徑：http://m.newbst.com/article48/pjdpep.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、手機網站建設、移動網站建設、微信小程序、定制開發、App開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯