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>