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.}