<script>
window.onload = function () {
var oBox = document.querySelector('.box');
var x = 0;
var y = 0;
var iSpeedX = 0;
var iSpeedY = 0;
var lastX = 0;
var lastY = 0;
oBox.onmousedown = function (ev) {
var disX = ev.clientX - x;
var disY = ev.clientY - y;
document.onmousemove = function (ev) {
x = ev.clientX - disX;
y = ev.clientY - disY;
oBox.style.transform = 'perspective(800px) rotateX(' + -(y) + 'deg) rotateY(' + (x) + 'deg)';
iSpeedX = ev.clientX - lastX;
iSpeedY = ev.clientY - lastY;
lastX = ev.clientX;
lastY = ev.clientY;
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
oBox.timer = setInterval(function () {
iSpeedX *= 0.8;
iSpeedY *= 0.8;
x += iSpeedX;
y += iSpeedY;
oBox.style.transform = 'perspective(800px) rotateX(' + -(y) + 'deg) rotateY(' + (x) + 'deg)';
if (Math.abs(iSpeedX) < 1)iSpeedX = 0;
if (Math.abs(iSpeedY) < 1)iSpeedY = 0;
if (iSpeedX == 0 && iSpeedY == 0) {
clearInterval(oBox.timer);
}
}, 16);
};
return false;
};
};
</script>
<body>
<div class="box">
<div class="front">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
</div>
</body>
