拖拽思路：先定義上下左右重合在一起的六個(gè)面的旋轉(zhuǎn)和移動(dòng)角度

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

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

其中js效果中初始值 var x = 30; var y = -60;就是初始定義的旋轉(zhuǎn)角度

#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);

前面后面上面下面左面右面

總結(jié)

以上是生活随笔為你收集整理的C语言 立方体随鼠标转动,HTML5鼠标控制的旋转的立方体的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。