<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>