CSS3 旋转3D立方体

 <meta charset="utf-8">
 <style>
   *{
     margin:0px;
     padding:0px;
   }

   @-webkit-keyframes anima{
     0%{
       -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
       -webkit-transform-origin:center center;
     }
     100%{
       -webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
       -webkit-transform-origin:center center;
     }
   }

   #box{
     width:100px;
     height:100px;
     position:relative;
     margin:0px auto;
     top:50%;
     -webkit-transform-style:preserve-3d;
     -webkit-perspective:0px;
     -moz-transform-style:preserve-3d;
     -moz-perspective:0px;
     -webkit-animation:anima 5s ease infinite;
     -moz-animation:anima 5s ease infinite;
   }

   .box{
     width:100px;
     height:100px;
     line-height:100px;
     text-align:center;
     position:absolute;
   }

   .box1{
     -webkit-transform:rotateY(90deg) translateZ(-50px);
     -moz-transform:rotateY(90deg) translateZ(-50px);
     background-color:rgba(255,0,0,0.8);
   }

   .box2{
     -webkit-transform:rotateY(90deg) translateZ(50px);
     -moz-transform:rotateY(90deg) translateZ(50px);
     background-color:rgba(0,255,0,0.8);
   }

   .box3{
     -webkit-transform:rotateX(90deg) translateZ(50px);
     -moz-transform:rotateX(90deg) translateZ(50px);
     background-color:rgba(0,0,255,0.8);
   }

   .box4{
     -webkit-transform:rotateX(90deg) translateZ(-50px);
     -moz-transform:rotateX(90deg) translateZ(-50px);
     background-color:rgba(255,255,0,0.8);
   }

   .box5{
     -webkit-transform:translateZ(-50px);
     -moz-transform:translateZ(-50px);
     background-color:rgba(255,0,255,0.8);
   }

   .box6{
     -webkit-transform:translateZ(50px);
     -moz-transform:translateZ(50px);
     background-color:rgba(0,255,255,0.8);
   }
 </style>

 <div id="box">
   <ul class="box box1">左面</ul>
   <ul class="box box2">右面</ul>
   <ul class="box box3">顶面</ul>
   <ul class="box box4">底面</ul>
   <ul class="box box5">背面</ul>
   <ul class="box box6">正面</ul>
 </div>