您现在的位置是：网站首页> 编程资料编程资料

css3 transform及原生js实现鼠标拖动3D立方体旋转纯CSS3实现鼠标滑过旋转一定角度的导航菜单效果(无js)CSS3实现的鼠标悬停按钮触发式旋转显示提示语动画特效源码纯CSS3实现的鼠标悬停图标旋转导航动画特效源码一款基于jquery+css3实现的鼠标悬停图片旋转变亮效果源码css实现的鼠标悬停360度背景图片做动画旋转效果css3实现的鼠标放上去旋转效果按钮纯CSS3实现鼠标滑过圆形图片旋转翻盖动画特效源码

2021-09-05 1102人已围观

简介 这篇文章主要为大家详细介绍了css3 transform及原生js实现鼠标拖动3D立方体旋转的相关资料，感兴趣的小伙伴们可以参考一下

本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
 
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。
 
从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：
 
HTML代码块：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.     <input type="button" class="open" value="点击散开"/>  
  3.     <input type="text" class="xNum" value="0"/>//X轴旋转角度   
  4.     <input type="text" class="yNum" value="0"/>//Y轴旋转角度   
  5.     <input type="text" class="zNum"/>  
  6.     <div class="big_box">  
  7.         <div class="box">  
  8.             <span>1span>  
  9.             <span>2span>  
  10.             <span>3span>  
  11.             <span>4span>  
  12.             <span>5span>  
  13.             <span>6span>  
  14.         div>  
  15.     div>  
  16. body>   

CSS代码块：

CSS Code复制内容到剪贴板