CSS实现3D图像轮转幻灯片

1.//变量初始化  
2.//图像分块个数，如要更改，html需要进行相应的修改  
3.$numPoster:10;  
4.  
5.//轮换图像个数，如要更改，html需要进行相应的修改  
6.$numFace:3;  
7.  
8.//图像宽度  
9.$width:600px;  
10.  
11.//图像高度  
12.$height:320px;  
13.  
14.//盒子的设置  
15..billboard {    
16.    width:$width;    
17.    margin:100px auto;    
18.}  
19.  
20.//图像条左浮动  
21..poster {    
22.    float:left;    
23.    width:$width/$numPoster;    
24.    height:$height;    
25.}  
26.  
27.//图像条面的统一设置，绝对定位、3d动画设置    
28..face {    
29.    position:absolute;    
30.    height:$height;    
31.    width:$width/$numPoster;    
32.    transform-origin:50% 50% -17px;    
33.    backface-visibility: hidden;    
34.    transform-style:preserve-3d;    
35.    perspective:350px;    
36.}    
37.  
38.//图像条面分别设置背景图像、动画  
39.@for $i from 1 through $numFace{    
40.  .poster .panel#{$i} {    
41.    background:url(http://gx.zptc.cn/whqet/img/#{$i}.jpg);    
42.    transform:transformY(360deg/$numFace*($i - 1));    
43.    animation: rotateMe#{$i} 10s infinite;    
44.  }    
45.  @keyframes rotateMe#{$i} {    
46.    0% {    
47.        transform:rotateY(360deg/$numFace*($i - 1));    
48.    }    
49.    9% {    
50.        transform:rotateY(360deg/$numFace*($i - 1));    
51.    }    
52.    24% {    
53.        transform:rotateY(360deg/$numFace*($i));    
54.    }    
55.    42% {    
56.        transform:rotateY(360deg/$numFace*($i));    
57.    }    
58.    57% {    
59.        transform:rotateY(360deg/$numFace*($i + 1));    
60.    }    
61.    75% {    
62.        transform:rotateY(360deg/$numFace*($i + 1));    
63.    }    
64.    90% {    
65.        transform:rotateY(360deg/$numFace*($i + 2));    
66.    }    
67.    100% {    
68.        transform:rotateY(360deg/$numFace*($i + 2));    
69.    }    
70.  }    
71.}  
72.  
73.//图像条面的背景偏移  
74.@for $i from 1 through $numPoster {    
75.  .poster .p#{$i} {background-position:-($width/$numPoster*($i - 1)) top;}    
76.}