css3魔方鼠标怎么用,CSS3之3D魔方鼠标控制酷炫效果

前面文章有制作水晶魔方，这次我们升级一下它的功能，通过鼠标控制魔方旋转。

大家先看效果

这酷炫的效果，你怎么看？

这次效果，咱们需要用JS实现。主要是监听鼠标事件，计算鼠标滑动距离，改变魔方的rotateX、rotateY

JS有哪些鼠标事件呢？

1、click：单击事件。

2、dblclick：双击事件。

3、onmousedown：鼠标按下时触发事件，不管按住左键/右键还是滑轮都可以

4、onmousemove：鼠标移动实时触发事件

5、onmouseup：鼠标松开时触发事件

6、mousemove：鼠标移动事件。

7、mouseover：移入事件。

8、mouseout：移出事件。

9、mouseenter：移入事件。

10、mouseleave：移出事件。

11、contextmenu：右键事件。

那需要监听哪些事件呢？了解了他们的作用，我们就知道如何处理了。

鼠标按下时，记录鼠标当前所处位置，移动时又可以获取实时位置，用移动时获取的实时位置减去鼠标按下时的位置，就可以得到鼠标移动的相对位置。鼠标松开，可以结束计算。

下面看看具体代码实现

示例代码

这里用到了Jquery，大家自行下载使用

这样就可以实现魔方跟随鼠标移动旋转了，但是大家可以看到上方的示例图，有一个展开和收起的效果，是如何实现的呢？

深入学习

之前咱们的魔方图是这样的

现在，画出2个魔方，一个小一点，使小的魔方刚好在大魔方中心位置

按照之前章节的样式，进行调节。使小的魔方刚好在大魔方中心位置。

样式如下：

然后我们通过JS控制展开和收起效果

OK，这样我们的 CSS3 3D魔方鼠标控制酷炫效果就实现了。

结语

大家学到了什么？JS鼠标事件都了解了吧？CSS3 3D场景都学会了吗？

关注我，学习更多前端知识，但不止于前端哦！

小伙伴们，有问题可以评论区留言哦，欢迎大家点评。需要源码的小伙伴可以购买，私信我哦。

谢谢大家一直以来的支持。

资源下载价格1元立即支付或升级VIP后免费升级VIP，支付前请先登录，支付前请先登录，支付前请先登录！

本站资源一次收费,永久下载！发现资源失效，联系站长恢复即可！由于源码具有可复制性、可传播性，一经购买，概不退货，购买前请再三确认！本站提供相关技术支持，网站底部联系即可。时间：周一 ~ 周五 9:30-18:00。谢谢合作！

VIP用户所有收费资源免费，登录后左上角点击昵称，进入用户中心充值成为VIP会员！如果您已经登录，点击这里成为尊贵VIP用户！

css3魔方鼠标怎么用,CSS3之3D魔方鼠标控制酷炫效果相关推荐

前端酷炫效果参考_纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
【有了可图网】PS实战系列64：用PS的3D功能设计制作一个酷炫的彩色立体字体
本篇教大家如何巧用PS的3D功能设计制作一个酷炫的彩色立体字体!教程讲解过程超详细,主要用到了PS的滤镜.调整层以及图层样式来完成效果,需转学起来! 彩色立体文字纹理素材链接链接:https://pa ...
python画3d图-Python 绘制酷炫的三维图步骤详解
通常我们用 Python 绘制的都是二维平面图,但有时也需要绘制三维场景图,比如像下面这样的: 这些图怎么做出来呢?今天就来分享下如何一步步绘制出三维矢量(SVG)图. 八面体我们先以下面这个八面体 ...
threejs开发3d地球酷炫效果
代码如下,详情:https://gitee.com/XiaoHu12685/three-demo/blob/master/examples/earth_tiger.html <!DOCTYPE ...
3D微信启动仪式，扫码启动大屏触摸启动头像汇聚企业logo科技感酷炫效果活动策划发布会创意跳跃互动tioyo
3D微信启动仪式是当今最创新的启动仪式,由跳跃互动原创,帮助各大品牌完成启动发布会,在行业活得一致好评口碑. 3D微信启动仪式兼具领导要求的科技感和互动性,让来宾体验到极佳的参与感. 3D微信启动仪式 ...
tree.js 酷炫的效果，人脸识别签到思路，html5 3D微信头像自动抽奖代码
1.酷炫效果 1.1 网址: https://wow.techbrood.com/fiddle/43962 网址:https://wow.techbrood.com/fiddle/25678 1.2 ...
css3 3D魔方
github地址:https://github.com/lishuai336/3D-mf/tree/master/3Dmf css3强大的功能让人叹为观止,我们工作中接触到的都是皮毛,要想真正提升技术 ...
html js3d魔方,使用CSS3一个3D魔方详解~
前言最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...
CSS3实现3D魔方翻转网页动画特效
CSS3实现3D魔方翻转网页动画特效 <link rel="stylesheet" type="text/css" href="square.c ...

css3魔方鼠标怎么用,CSS3之3D魔方鼠标控制酷炫效果

css3魔方鼠标怎么用,CSS3之3D魔方鼠标控制酷炫效果相关推荐

最新文章

热门文章