CSS3 旋转3D立方体 - ︶ㄣ古剑丶魂

 1 <meta charset="utf-8">
 2 <style>
 3   *{
 4     margin:0px;
 5     padding:0px;
 6   }
 7   
 8   @-webkit-keyframes anima{
 9     0%{
10       -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
11       -webkit-transform-origin:center center;
12     }
13     100%{
14       -webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
15       -webkit-transform-origin:center center;
16     }
17   }
18   
19   #box{
20     width:100px;
21     height:100px;
22     position:relative;
23     margin:0px auto;
24     top:50%;
25     -webkit-transform-style:preserve-3d;
26     -webkit-perspective:0px;
27     -moz-transform-style:preserve-3d;
28     -moz-perspective:0px;
29     -webkit-animation:anima 5s ease infinite;
30     -moz-animation:anima 5s ease infinite;
31   }
32   
33   .box{
34     width:100px;
35     height:100px;
36     line-height:100px;
37     text-align:center;
38     position:absolute;
39   }
40   
41   .box1{
42     -webkit-transform:rotateY(90deg) translateZ(-50px);
43     -moz-transform:rotateY(90deg) translateZ(-50px);
44     background-color:rgba(255,0,0,0.8);
45   }
46   
47   .box2{
48     -webkit-transform:rotateY(90deg) translateZ(50px);
49     -moz-transform:rotateY(90deg) translateZ(50px);
50     background-color:rgba(0,255,0,0.8);
51   }
52   
53   .box3{
54     -webkit-transform:rotateX(90deg) translateZ(50px);
55     -moz-transform:rotateX(90deg) translateZ(50px);
56     background-color:rgba(0,0,255,0.8);
57   }
58   
59   .box4{
60     -webkit-transform:rotateX(90deg) translateZ(-50px);
61     -moz-transform:rotateX(90deg) translateZ(-50px);
62     background-color:rgba(255,255,0,0.8);
63   }
64   
65   .box5{
66     -webkit-transform:translateZ(-50px);
67     -moz-transform:translateZ(-50px);
68     background-color:rgba(255,0,255,0.8);
69   }
70   
71   .box6{
72     -webkit-transform:translateZ(50px);
73     -moz-transform:translateZ(50px);
74     background-color:rgba(0,255,255,0.8);
75   }
76 style>
77 
78 <div id="box">
79   <ul class="box box1">左面ul>
80   <ul class="box box2">右面ul>
81   <ul class="box box3">顶面ul>
82   <ul class="box box4">底面ul>
83   <ul class="box box5">背面ul>
84   <ul class="box box6">正面ul>
85 div>