纯css实现3D图像轮转效果

本文实例为大家分享了纯css实现3D图像轮转效果的具体代码，供大家参考，具体内容如下

首先看html文件，div.billboard为效果的容器，利用10个div.poster分割图像，每个poster中有三个face，分别用来承载三个图像。

1. <div class="billboard">     
2.     <div class="poster">     
3.         <div class="face panel1 p1"></div>     
4.         <div class="face panel2 p1"></div>     
5.         <div class="face panel3 p1"></div>     
6.     </div>     
7.     <div class="poster">     
8.         <div class="face panel1 p2"></div>     
9.         <div class="face panel2 p2"></div>     
10.         <div class="face panel3 p2"></div>     
11.     </div>     
12.     <div class="poster">     
13.         <div class="face panel1 p3"></div>     
14.         <div class="face panel2 p3"></div>     
15.         <div class="face panel3 p3"></div>     
16.     </div>     
17.     <div class="poster">     
18.         <div class="face panel1 p4"></div>     
19.         <div class="face panel2 p4"></div>     
20.         <div class="face panel3 p4"></div>     
21.     </<