html5和css3实现的3D滚动特效

今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

1. <div class=”container”>
2. <div class=”cube”>
3. <div class=”side side1″>
4. </div>
5. <div class=”side side2″>
6. </div>
7. <div class=”side side3″>
8. </div>
9. <div class=”side side4″>
10. </div>
11. <div class=”side side5″>
12. </div>
13. <div class=”side side6″>
14. </div>
15. </div>
16. </div>
17. <div class=”container container2″>
18. <div class=”cube”>
19. <div class=”side side1″>
20. </div>
21. <div class=”side side2″>
22. </div>
23. <div class=”side side3″>
24. </div>
25. <div class=”side side4″>
26. </div>
27. <div class=”side side5″>
28. </div>
29. <div class=”side side6″>
30. </div>
31. </div>
32. </div>

css3代码：

1. body{
2. height:100vh;
3. }
4. .container{
5. position:absolute;
6. height:100px;
7. width:100px;
8. left:33%;
9. top:50%;
10. -webkit-transform: translateX(-50%) translateY(-50%);
11. transform: translateX(-50%) translateY(-50%);
12. -webkit-perspective:400px;
13. perspective:400px;
14. }
15. .cube{
16. height:100px;
17. widht:100px;
18. -webkit-transform-origin:50% 50%;
19. transform-origin:50% 50%;
20. -webkit-transform-style:preserve-3d;
21. transform-style:preserve-3d;
22. -webkit-animation:rotate 4s infinite ease-in-out;
23. animation:rotate 4s infinite ease-in-out;
24. }
25. .side{
26. position:absolute;
27. display:block;
28. height:100px;
29. width:100px;
30. }
31. .side1{
32. background:#41C3AC;
33. -webkit-transform:translateZ(100px);
34. transform:translateZ(100px);
35. }
36. .side2{
37. background:#FF884D;
38. -webkit-transform:rotateY(90deg) translateZ(100px);
39. transform:rotateY(90deg) translateZ(100px);
40. }
41. .side3{
42. background:#32526E;
43. -webkit-transform:rotateY(180deg) translateZ(100px);
44. transform:rotateY(180deg) translateZ(100px);
45. }
46. .side4{
47. background:#65A2C5;
48. -webkit-transform:rotateY(-90deg) translateZ(100px);
49. transform:rotateY(-90deg) translateZ(100px);
50. }
51. .side5{
52. background:#FFCC5C;
53. -webkit-transform:rotateX(90deg) translateZ(100px);
54. transform:rotateX(90deg) translateZ(100px);
55. }
56. .side6{
57. background:#FF6B57;
58. -webkit-transform:rotateX(-90deg) translateZ(100px);
59. transform:rotateX(-90deg) translateZ(100px);
60. }
61. @-webkit-keyframes rotate{
62. 0%{
63. -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
64. }
65. 33.33%{
66. -webkit-transform:rotateX(360deg) rotateY(0deg)  rotateZ(0deg);
67. }
68. 66.66%{
69. -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(0deg);
70. }
71. 100%{
72. -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);
73. }
74. }
75. @keyframes rotate{
76. 0%{
77. transform:rotateX(0deg) rotateY(0deg);
78. }
79. 50%{
80. transform:rotateX(360deg) rotateY(0deg);
81. }
82. 100%{
83. transform:rotateX(360deg) rotateY(360deg);
84. }
85. }
86. a{
87. font-family:helvetica;
88. color:#428bca;
89. text-align:center;
90. display:block;
91. }
92. .container2{
93. left:66%;
94. }
95. .container2 .side{
96. border-radius:50%;
97. }