css3实现立方体的旋转功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:200px;
height:200px;
margin:100px auto;
transform:perspective(800px) rotateY(0deg) rotateX(0deg);
transform-style: preserve-3d;
}
#box div{
position: absolute;
top:0;
left:0;
width:200px;
height:200px;
}
#box .face{
background: yellow;
transform:translateZ(100px);
}
#box .back{
background: #996;
transform:translateZ(-100px);
}
#box .top{
background: #234;
transform:translateY(-100px) rotateX(-90deg);
}
#box .bottom{
background: green;
transform:translateY(100px) rotateX(-90deg);
}
#box .left{
background: blue;
transform:translateX(-100px) rotateY(90deg);
}
#box .right{
background: pink;
transform:translateX(100px) rotateY(90deg);
}
/* #box:hover{
transform:perspective(800px) rotateY(360deg) rotateX(360deg);
} */
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var bLeft=false;
var bRight=false;
var bTop=false;
var bBottom=false;
//初始值
var x=0; //x轴旋转角度
var y=0;//y轴旋转角度
//键盘
/*document.onkeydown=function(ev){
//打开开关
switch(ev.keyCode){
case 37:
bLeft=true;
break;
case 38:
bTop=true;
break;
case 39:
bRight=true;
break;
case 40:
bBottom=true;
break;
}
};
document.onkeyup=function(ev){
//打开开关
switch(ev.keyCode){
case 37:
bLeft=false;
break;
case 38:
bTop=false;
break;
case 39:
bRight=false;
break;
case 40:
bBottom=false;
break;
}
};
setInterval(function(){
if(bLeft){
y-=4;
}
if(bBottom){
x-=4;
}
if(bTop){
x+=4;
}
if(bRight){
y+=4;
}
oBox.style.transform='perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'
},30)*/
//鼠标
document.onmousedown=function(ev){
var disX=ev.clientX-y;
var disY=ev.clientY-x;
document.onmousemove=function(ev){
x=disY-ev.clientY;
y=ev.clientX-disX;
oBox.style.transform='perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'
};
document.onmouseup=function(){
document.onmouseup=null;
document.onmousemove=null;
};
return false;
};
};
</script>
</head>
<body>
<div id="box">
<div class="face"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
