基于CSS3的新属性变换和原生js的3D立方体旋转实现鼠标拖动

通过本地js，点击事件，鼠标点击，鼠标升降和鼠标移动事件，实现三维立方体的拖动和旋转，并将旋转角度实时显示到界面上。
其实现原理是通过获取鼠标在屏幕上的坐标和鼠标移动的坐标来获取X轴与Y轴之间的移动距离，并实时地将距离赋给变换属性。
通过改变变换：旋转属性值来实现三维立方体旋转的效果
代码块：

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

代码块：
体{光标：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；
转换原点：底部；
变换：rotatex（- 90度）translatey（100）； / /下
}
框跨度：n个子（5）{
背景颜色：LD；
变换：translatez（- 100像素）； / /后
}
框跨度：n个子（6）{
背景颜色：# 122b40；
变换：translatez（100）； / /前
}
框：悬停跨度{
不透明性：0.3；
}
框：悬停{
动画播放状态：暂停；设置暂停动画
}
js代码块：
移动（）；
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）{ / /鼠标事件，当鼠标按下并移动触发
xarr { 1 } = e.clientx / / / 2；第一个坐标点获取鼠标移动
增益状态{ 1 } = e.clienty / 2；
YY = xarr { 1 } - xarr { 0 }； / /获取鼠标的移动距离
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 = function ({//) event -- for the removal of mouse up mouse events,
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）；
}
}
}；
}
以上是萧边介绍给你基于CSS3的新属性变换和原生js实现的3D立方体旋转鼠标拖动的相关知识，希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。