0
0
高洛峰
发布时间：2017-03-08 15:29:34
|2991人浏览过
|来源于php中文网
原创
本文通过原生js，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。
从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：
HTML代码块：
//X轴旋转角度
//Y轴旋转角度
1
2
3
4
5
6
立即学习“前端免费学习笔记（深入）”；
CSS代码块：
立即学习“前端免费学习笔记（深入）”；
JS代码块：
立即学习“前端免费学习笔记（深入）”；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
相关文章
css 想让文字在缩放时平滑过渡怎么办_使用 font-size 过渡实现动画
css 想让卡片组件在悬停时有动画怎么办_使用 css animate.css 提供 hover 动画
css 想让固定元素在移动端自适应怎么办_position sticky 与 media query
css 想让元素在状态变化时平滑过渡怎么办_使用过渡属性设置过渡时间和效果
css transition 属于基础属性吗_动画过渡入门理解
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
