css3 transform及原生js实现鼠标拖动3D立方体旋转

浏览量·222
PDF
41KB
2020-12-13 12:20:54 上传
身份认证 购VIP最低享 7 折!
weixin_38617196
  • 粉丝: 5
  • 资源: 934
前往需求广场,查看用户热搜
上传资源 快速赚钱
精品专辑
内容简介:css3 transform及原生及原生js实现鼠标拖动实现鼠标拖动3D立方体旋转立方体旋转本文通过原生JS,点击事件,鼠标按下、鼠标抬起和鼠标移动事件,实现3D立方体的拖动旋转,并将旋转角度实时的反应至界面上显示。 实现原理:实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴、Y轴移动的距离,将距离实时赋值给transform属性。 从而通过改变transform:rotate属性值来达到3D立方体旋转的效果: HTML代码块:XML/HTML Code复制内容到剪贴板<body> <input type="button" class="open" val...