js实现可旋转的立方体模型
这是一个简单的立方体应用，他是很多立方旋转变换的基础，例如实现3D轮播图的实现等。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>可旋转立方体效果</title>
<styletype="text/css">
*{padding:0;margin:0}
img{border:0}
ulli{list-style:none}
ul{width:200px;height:200px;margin:100pxauto;
position:relative;-webkit-transform-style:preserve-3d;
/*perspective:100px;*/
}
/*绕中心旋转，坐标轴会随旋转而旋转*/
li{width:200px;height:200px;position:absolute;text-align:center;line-height:200px;font-size:80px;font-weight:bold;color:#fff;}
/*构造六个面*/
li:nth-child(1){background:rgba(255,0,0,1);-webkit-transform:rotateX(90deg)translateZ(100px);}
li:nth-child(2){background:rgba(0,255,255,1);-webkit-transform:rotateX(270deg)translateZ(100px);}
li:nth-child(3){background:rgba(255,0,255,1);-webkit-transform:rotateY(90deg)translateZ(100px);}
li:nth-child(4){background:rgba(0,255,0,1);-webkit-transform:rotateY(270deg)translateZ(100px);}
li:nth-child(5){background:rgba(200,200,0,1);-webkit-transform:translateZ(-100px);}
li:nth-child(6){background:rgba(0,0,255,1);-webkit-transform:translateZ(100px);}
.button{
width:200px;margin:20pxauto;
position:relative;
cursor:pointer;
}
input{
width:50px;height:30px;
position:absolute;
cursor:pointer;
}
/*按钮的绝对定位*/
input:nth-child(1){left:100px;top:0}
input:nth-child(2){left:200px;top:50px;}
input:nth-child(3){left:0px;top:50px;}
input:nth-child(4){left:100px;top:100px;}
input:nth-child(5){left:100px;top:50px;}
</style>
<scripttype="text/javascript">
window.onload=function(){
varx=0,y=0;
varul=document.getElementById('ul');
varinputs=document.getElementsByTagName('input');
for(vari=0;i<inputs.length;i++){
inputs[i].onclick=run;
}
functionrun(){
/*渐变*/
ul.style.webkitTransition='-webkit-transform3slinear';
ul.style.oTransition='-o-transform3slinear';
ul.style.transition='transform3slinear';
/*旋转的规则，就是x，y方向的deg改变*/
if(inputs[0]==this){x+=90;}
if(inputs[1]==this){y+=90;}
if(inputs[2]==this){y-=90;}
if(inputs[3]==this){x-=90;}
if(inputs[4]==this){
x=0;y=0;
ul.style.webkitTransition='-webkit-transform.1slinear';
ul.style.oTransition='-o-transform.1slinear';
ul.style.transition='transform.1slinear';
}
ul.style.webkitTransform='rotateX('+x+'deg)rotateY('+y+'deg)';
ul.style.oTransform='rotateX('+x+'deg)rotateY('+y+'deg)';
ul.style.transform='rotateX('+x+'deg)rotateY('+y+'deg)';
}
document.addEventListener('keydown',function(e){
ul.style.webkitTransition='-webkit-transform3slinear';
switch(e.keyCode){
case37:y-=90;//左箭头
break;
case38:x+=90;//上箭头
break;
case39:y+=90;//下箭头
break;
case40:x-=90;//右箭头
break;
case13:x=0;y=0;//回车（当回车时，迅速转回初始状态）
ul.style.webkitTransition='-webkit-transform0.1slinear';
break;
}
ul.style.webkitTransform="rotateX("+x+"deg)rotateY("+y+"deg)";//变换效果（沿X轴和Y轴旋转）
},false);document.addEventListener("keydown",function(e){
ul.style.webkitTransition='-webkit-transform3slinear';
ul.style.oTransition='-o-transform3slinear';
ul.style.transition='transform3slinear';
switch(e.keyCode){
case37:
}
})
/*functionrun(){
ul.style.webkitTransition='-webkit-transform3slinear';//设置立方体变换的属性、持续时间、动画类型
if(inputs[0]==this){x+=90;}
if(inputs[1]==this){y+=90;}
if(inputs[2]==this){y-=90;}
if(inputs[3]==this){x-=90;}
if(inputs[4]==this){x=0;y=0;ul.style.webkitTransition='-webkit-transform0.1slinear';}//当点击重置按钮时，迅速转回到初始状态。
ul.style.webkitTransform="rotateX("+x+"deg)rotateY("+y+"deg)";//变换效果（沿X轴和Y轴旋转）
}*/
}
</script>
</head>
<body>
<ulid="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<divclass="container">
</div>
<divclass="button">
<inputtype="button"value="上">
<inputtype="button"value="右">
<inputtype="button"value="左">
<inputtype="button"value="下">
<inputtype="button"value="重置">
</div>
</body>
</html>