一款利用html5和css3实现的3D滚动特效的教程

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

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

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代码：

CSS Code复制内容到剪贴板

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. }   
26. .side{   
27.   position:absolute;   
28.   display:block;   
29.   height:100px;   
30.   width:100px;   
31. }   
32. .side1{   
33.   background:#41C3AC;   
34.   -webkit-transform:translateZ(100px);   
35.           transform:translateZ(100px);   
36. }   
37. .side2{   
38.   background:#FF884D;   
39.   -webkit-transform:rotateY(90deg) translateZ(100px);   
40.           transform:rotateY(90deg) translateZ(100px);   
41. }   
42. .side3{   
43.   background:#32526E;   
44.   -webkit-transform:rotateY(180deg) translateZ(100px);   
45.           transform:rotateY(180deg) translateZ(100px);   
46. }   
47. .side4{   
48.   background:#65A2C5;   
49.   -webkit-transform:rotateY(-90deg) translateZ(100px);   
50.           transform:rotateY(-90deg) translateZ(100px);   
51. }   
52. .side5{   
53.   background:#FFCC5C;   
54.   -webkit-transform:rotateX(90deg) translateZ(100px);   
55.           transform:rotateX(90deg) translateZ(100px);   
56. }   
57. .side6{   
58.   background:#FF6B57;   
59.   -webkit-transform:rotateX(-90deg) translateZ(100px);   
60.           transform:rotateX(-90deg) translateZ(100px);   
61. }   
62.   
63. @-webkit-keyframes rotate{   
64.   0%{   
65.     -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);   
66.   }   
67.   33.33%{   
68.      -webkit-transform:rotateX(360deg) rotateY(0deg)  rotateZ(0deg);       
69.   }   
70.   66.66%{   
71.      -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(0deg);   
72.   }   
73.   100%{   
74.      -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);   
75.   }   
76. }   
77. @keyframes rotate{   
78.   0%{   
79.     transform:rotateX(0deg) rotateY(0deg);   
80.   }   
81.   50%{   
82.     transform:rotateX(360deg) rotateY(0deg);       
83.   }   
84.   100%{   
85.     transform:rotateX(360deg) rotateY(360deg);   
86.   }   
87. }   
88. a{   
89.   font-family:helvetica;   
90.   color:#428bca;   
91.   text-align:center;   
92.   display:block;   
93. }   
94.   
95. .container2{   
96.   left:66%;   
97. }   
98. .container2 .side{   
99.   border-radius:50%;   
100. }