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>
上一篇:F - 娜娜梦游仙境系列——多民族王国


下一篇:常见的装包的三种宝,包 bao-devel bao-utils bao-agent ,包 开发包 工具包 客户端