css3transform及原生js实现鼠标拖动3D立方体旋转的示例分析
这篇文章将为大家详细讲解有关css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联建站主要从事成都做网站、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务依兰,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
js的作用是什么
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。
本文通过原生JS,点击事件,鼠标按下、鼠标抬起和鼠标移动事件,实现3D立方体的拖动旋转,并将旋转角度实时的反应至界面上显示。
实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴、Y轴移动的距离,将距离实时赋值给transform属性。
从而通过改变transform:rotate属性值来达到3D立方体旋转的效果:
HTML代码块:
XML/HTML Code复制内容到剪贴板
//X轴旋转角度 //Y轴旋转角度1 2 3 4 5 6
CSS代码块:
CSS Code复制内容到剪贴板
JS代码块:
JavaScript Code复制内容到剪贴板
关于“css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前文章:css3transform及原生js实现鼠标拖动3D立方体旋转的示例分析
文章来源:http://cdiso.cn/article/jjoiij.html