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用户！