|
[tr][td] 今天看一个纯css实现的3D图像轮转效果，大家可以点击查看效果研究， 也可以先下载收藏。
首先看html文件，div.billboard为效果的容器，利用10个div.poster分割图像，每个poster中有三个face，分别用来承载三个图像。 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. CSS文件这里我们用到了sass，用的是scss语法。 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.} 使用sass可以使得代码结构清晰，逻辑性强，请大家研读提升！ [/td][/tr] |
|
