纯CSS实现3D图像轮转

CSS演武场今天继续，今天看一个纯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.     </div>  
22.     <div class="poster">  
23.         <div class="face panel1 p5"></div>  
24.         <div class="face panel2 p5"></div>  
25.         <div class="face panel3 p5"></div>  
26.     </div>  
27.     <div class="poster">  
28.         <div class="face panel1 p6"></div>  
29.         <div class="face panel2 p6"></div>  
30.         <div class="face panel3 p6"></div>  
31.     </div>  
32.     <div class="poster">  
33.         <div class="face panel1 p7"></div>  
34.         <div class="face panel2 p7"></div>  
35.         <div class="face panel3 p7"></div>  
36.     </div>  
37.     <div class="poster">  
38.         <div class="face panel1 p8"></div>  
39.         <div class="face panel2 p8"></div>  
40.         <div class="face panel3 p8"></div>  
41.     </div>  
42.     <div class="poster">  
43.         <div class="face panel1 p9"></div>  
44.         <div class="face panel2 p9"></div>  
45.         <div class="face panel3 p9"></div>  
46.     </div>  
47.     <div class="poster">  
48.         <div class="face panel1 p10"></div>  
49.         <div class="face panel2 p10"></div>  
50.         <div class="face panel3 p10"></div>  
51.     </div>  
52. </div>  

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：纯CSS实现3D图像轮转

关键词：CSS