本文通过原生js,点击事件,鼠标按下、鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示。
实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴、Y轴移动的距离,将距离实时赋值给transform属性。
从而通过改变transform:rotate属性值来达到3D立方体旋转的效果:
HTML代码块:
//X轴旋转角度
//Y轴旋转角度
1
2
3
4
5
6
立即学习“前端免费学习笔记(深入)”;
CSS代码块:
立即学习“前端免费学习笔记(深入)”;
JS代码块:
立即学习“前端免费学习笔记(深入)”;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持PHP中文网。










