css3 transform及原生js实现鼠标拖动3D立方体旋转
这篇文章主要为大家详细介绍了css3 transform及原生js实现鼠标拖动3D立方体旋转的相关资料，感兴趣的小伙伴们可以参考一下
本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。
从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：
HTML代码块：
XML/HTML Code复制内容到剪贴板
- <body>
- <input type="button" class="open" value="点击散开"/>
- <input type="text" class="xNum" value="0"/>//X轴旋转角度
- <input type="text" class="yNum" value="0"/>//Y轴旋转角度
- <input type="text" class="zNum"/>
- <div class="big_box">
- <div class="box">
- <span>1span>
- <span>2span>
- <span>3span>
- <span>4span>
- <span>5span>
- <span>6span>
- div>
- div>
- body>
CSS代码块：
CSS Code复制内容到剪贴板
JS代码块：
JavaScript Code复制内容到剪贴板
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
标签：