css3 transform及原生js实现鼠标拖动3D立方体旋转
本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。
从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：
HTML代码块：
- <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复制内容到剪贴板以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持潘少俊衡。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/CSS/77821.html
