拖拽思路：先定义上下左右重合在一起的六个面的旋转和移动角度

立方体效果 transform-style: preserve-3d;

定义初始值 transform: perspective(800px) rotateY(-60deg) rotateX(30deg);

其中js效果中初始值 var x = 30; var y = -60;就是初始定义的旋转角度

#box{

width: 200px;

height: 200px;

margin:150px auto;

transform-style: preserve-3d;

position: relative;

font-size:50px;

line-height: 200px;

text-align: center;

transform: perspective(800px) rotateY(-60deg) rotateX(30deg);

}

#box div{

width:100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

opacity: 0.8;

}

.front{

background: red;

transform: translateZ(100px);

}

.back{

background: yellow;

transform: translateZ(-100px);

}

.top{

background: blue;

transform: translateY(-100px) rotateX(90deg);

}

.bottom{

background: green;

transform: translateY(100px) rotateX(-90deg);

}

.left{

background: aqua;

transform:translateX(-100px) rotateY(-90deg);

}

.right{

background: #399;

transform:translateX(100px) rotateY(90deg);

}

document.addEventListener('DOMContentLoaded',function(){

var oBox = document.getElementById('box');

var x = 30;

var y = -60;

document.onmousedown = function(ev){

var oEvent = ev||event;

var disX = oEvent.clientX - y;

var disY = oEvent.clientY - x;

document.onmousemove = function(ev){

var oEvent = ev||event;

x = oEvent.clientX - disX;

y = oEvent.clientY - disY;

oBox.style.WebkitTransform = 'perspective(800px) rotateY('+x+'deg) rotateX('+(-y)+'deg)';

};

document.onmouseup = function(){

document.onmousemove = null;

document.onmouseup = null;

};

return false;

};

},false);