本文實例為大家分享了純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>
新聞熱點
疑難解答