初始值：景深和旋转 transform:perspective(1000px) rotateY(-60deg) rotateX(30deg)
点击鼠标设定初始值x=30 y=-60;
var disX=oEvent.clientX-x;
var disY=oEvent.clientY-y;
样式设定：
上 transform:translateY(-150px) rotateX(90deg);
下 transform:translateY(150px) rotateX(-90deg);
前 transform:translateZ(150px);
后 transform:translateZ(-150px);
左 transform:translateX(-150px) rotateY(90deg); }
右 transform:translateX(150px) rotateY(-90deg); }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{ margin:0; padding:0; }
.box{ width:300px;
height:300px;
margin:100px auto;
position:relative;
transform-style:preserve-3d;
transition:1s all ease ;
transform:perspective(1000px) rotateY(-60deg) rotateX(30deg)
}
.box div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
line-height:300px;
text-align:center;
font-size:50px;
color:#fff;
opacity:0.5;
}
.box .front{
background:red;
transform:translateZ(150px);
}
.box .back{
background:yellow;
transform:translateZ(-150px);
}
.box .left{
background:blue;
transform:translateX(-150px) rotateY(90deg); }
.box .right{
background:green;
transform:translateX(150px) rotateY(-90deg); }
.box .top{
background:pink;
transform:translateY(-150px) rotateX(90deg);
}
.box .bottom{
background:#f84540;
transform:translateY(150px) rotateX(-90deg);
}
</style>
<script>
window.onload=function(){
var oDiv=document.querySelector('#box');
var x=30;
var y=-60;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-x;
var disY=oEvent.clientY-y;
document.onmousemove=function(ev){
var oEvent=ev||event;
var x=oEvent.clientX-disX;
var y=oEvent.clientY-disY;
oDiv.style.WebkitTransform='perspective(1000px) rotateY('+x+'deg) rotateX('+(-y)+'deg)';
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
};
};
</script>
<body>
<div id="box" class="box">
<div class="front">前</div>
<div class="back">后</div>
<div class="top">上</div>
<div class="bottom">下</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
<script>
</script>
