CSS3变换和原生js实现鼠标拖动3D立方体旋转

本文利用本地js、点击事件、鼠标点击、鼠标升降和鼠标运动事件来实现三维立方体的拖动和旋转，并旋转角度实时响应界面。

其实现原理是通过获取鼠标在屏幕上的坐标和鼠标移动的坐标来获取X轴和Y轴之间的距离，并实时获得变换属性的距离。

通过改变转换：旋转属性值，实现了三维立方体旋转的效果。

代码块：

xml代码将内容复制到剪贴板。




旋转轴的旋转角
旋转轴的旋转角



一
二
三
四
五
六







代码块：

CSS代码将内容复制到剪贴板。



体{光标：URL（IMG / openhand1。png），汽车；}
big_box {。
宽度：500px；
身高：500px；
保证金：200px汽车；
}

箱{。
WebKit的变换风格：preserve-3d；
风格：preserve-3d -moz变换；
MS变换风格：preserve-3d；
风格：preserve-3d变换；
来源：100px 100px 00px变换；
职位：相对；
变换：rotatex（0度）rotatey（0度）rotatez（0度）scale3d（0.7,0.7,0.7）；
}
框跨度{
转换：全1线性；

}
跨{
显示块；
位置：绝对；
宽度：200px；
身高：200px；
盒尺寸：边框框；
边境：1px solid # 999；
0.7 *不透明度：；
文本对齐：中心；
行高：200px；
字体大小：60px；
字体重量：700；
边框半径：12%；

}
框跨度：n个子（1）{
背景颜色：深天蓝色；
转换原点：左；
变换：rotatey（- 90度）translatex（- 100像素）； / /左
}
框跨度：n个子（2）{
背景颜色：红色；
变换起源：错误；
变换：rotatey（90度）translatex（100）； / /右

}

框跨度：n个子（3）{
背景颜色：绿色；
转换原点：顶部；
变换：rotatex（90度）translatey（- 100像素）； / /

}
框跨度：n个子（4）{
背景颜色：# 6633ff；
来源：bottombottom变换；
变换：rotatex（- 90度）translatey（100）； / /下
}
框跨度：n个子（5）{
背景颜色：LD；
变换：translatez（- 100像素）； / /后
}
框跨度：n个子（6）{

背景颜色：# 122b40；
变换：translatez（100）； / /前
}
框：悬停跨度{

不透明性：0.3；
}
框：悬停{
动画播放状态：暂停；设置暂停动画
}





js代码块：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。



移动（）；

ClickBox（）；

鼠标向下移动触发器，

函数移动（）{
VaR的身体= document.queryselector（体）；
VaR箱= document.queryselector（箱）；
无功xnum = document.queryselector（。xnum ）；
无功ynum = document.queryselector（。ynum ）；
var x＝0，y＝0，z＝0；
var = 0，YY = 0；
无功xarr =增益状态= { }，{ }；
window.onmousedown =功能（e）{ / /鼠标
body.style.cursor = 'url（IMG / closedhand1。png），汽车；
xarr { 0 } = e.clientx / / / 2；获取鼠标点击在屏幕上的坐标值
增益状态{ 0 } = e.clienty / 2；
window.onmousemove =功能（e）{ / /鼠标事件mdash；mdash；mdash；mdash；当鼠标移动时，按下扳机
xarr { 1 } = e.clientx / / / 2；第一个坐标点获取鼠标移动
增益状态{ 1 } = e.clienty / 2；
YY = xArr{1} - xArr{0}; / / get the mouse moving distance
XX =增益状态{ 1 } -增益状态{ 0 }；
xnum.value = XX +度； / /将被分配到距离数字输入显示旋转角度
ynum.value = YY +度；
在变换中的旋转角
box.style.transform =rotatex（XX +°）rotatey（+ YY +°）rotatez（0度）scale3d（0.7,0.7,0.7）；
xarr { 0 } = e.clientx / 2；
增益状态{ 0 } = e.clienty / 2；
}

}；
window.onmouseup =功能（-）{ / /鼠标事件；mdash；mdash；mdash；对鼠标事件的处理，
body.style.cursor = 'url（IMG / openhand1。png），汽车；
window.onmousemove = null；
}
}
六扩展单击事件，负责多维数据集
功能clickbox（）{
VaR建立document.queryselector（，）；
VaR箱= document.queryselector（箱）；
VaR的儿子= box.children；
var值= 0；
转换参数。当内存立方体
无功arr0 = { rotatey（- 90度）translatex（- 100像素）}，rotatey（90度）translatex（100）
在合并时转换参数存储多维数据集
VaR arr1 = { rotatey（- 90度）translatex（- 100像素）translatez（100），rotatey（90度）translatex（100）translatez（100），rotatex（90度）translatey（- 100像素）translatez（100），rotatex（- 90度）translatey（100）translatez（100）。translatez （- 200px），translatez（200px）}；
btn.onclick =函数（）{
如果（值= 0）{
值= 1；
btn.value = ，单击合并；
对于（var i = 0；i < arr1.length；i++）{
儿子{我}。style.transform = arr1 {我}；
Console.log（儿子{我}）
}
否则如果（值= 1）{
值= 0；
btn.value = 单击松；
对于（var j = 0；J < arr0.length；j++）{
儿子{ J }。style.transform = arr0 {，}；
console.log（J）；

}
}
}；
}






以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。