|CSS3之3D魔方鼠标控制酷炫效果

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

本文插图
CSS3之3D魔方鼠标控制酷炫效果
这酷炫的效果，你怎么看？
鼠标事件
这次效果，咱们需要用JS实现。主要是监听鼠标事件，计算鼠标滑动距离，改变魔方的rotateX、rotateY
【|CSS3之3D魔方鼠标控制酷炫效果】

本文插图
CSS3之3D魔方鼠标控制酷炫效果
JS有哪些鼠标事件呢？
1、click：单击事件。
2、dblclick：双击事件。
3、onmousedown：鼠标按下时触发事件，不管按住左键/右键还是滑轮都可以
4、onmousemove：鼠标移动实时触发事件
5、onmouseup：鼠标松开时触发事件
6、mousemove：鼠标移动事件。
7、mouseover：移入事件。
8、mouseout：移出事件。
9、mouseenter：移入事件。
10、mouseleave：移出事件。
11、contextmenu：右键事件。
那需要监听哪些事件呢？了解了他们的作用，我们就知道如何处理了。
鼠标按下时，记录鼠标当前所处位置，移动时又可以获取实时位置，用移动时获取的实时位置减去鼠标按下时的位置，就可以得到鼠标移动的相对位置。鼠标松开，可以结束计算。

本文插图
CSS3之3D魔方鼠标控制酷炫效果
下面看看具体代码实现
示例代码
这里用到了Jquery ，大家自行下载使用
// 角度初始化 var RotateY = 0; var RotateX = 0; // 用个变量来拦截onmousemove ，var flag = false; // 起点位置 var old_x = 0; var old_y = 0; document.onmousedown = function (e) { flag = true; // 按下鼠标时，记录起点位置 old_x = e.pageX; old_y = e.pageY; } document.onmousemove = function (e) { // 必须是按下后移动才有效果 if (flag) { /** * 新位置减去老位置 * 得到鼠标移动的X/Y距离 */ var _x = e.pageX - old_x; var _y = e.pageY - old_y; /** * 除以70得到需要旋转的角度 * 除数越大，鼠标移动后旋转的角度越小，* 相反，除数是1 ，鼠标轻轻拖动，也会旋转的非常厉害 */ RotateY += _x / 70; RotateX += -(_y / 70); /** * 添加transform ，盒子进行3D旋转 */ $('.box').css({ transition: 'linear', transform: 'rotateX(' + RotateX + 'deg) rotateY(' + RotateY + 'deg)' }); } }; document.onmouseup = function () { flag = false; // 鼠标抬起时结束 };这样就可以实现魔方跟随鼠标移动旋转了，但是大家可以看到上方的示例图，有一个展开和收起的效果，是如何实现的呢？
深入学习
之前咱们的魔方图是这样的

本文插图
CSS3之3D魔方鼠标控制酷炫效果
现在，画出2个魔方，一个小一点，使小的魔方刚好在大魔方中心位置
前
后
左
右
上
下
按照之前章节的样式，进行调节。使小的魔方刚好在大魔方中心位置。

本文插图
CSS3之3D魔方鼠标控制酷炫效果
样式如下：
.content { margin-top: 200px; perspective: 1000px; /* 视距 */ } .box { width: 200px; height: 200px; position: relative; color: #fffdf5; font-size: 36px; font-weight: bold; text-align: center; line-height: 200px; transform-style: preserve-3d; /* 默认 2D */ transition: transform 1s; /*transform动画效果*/ /*不让鼠标选中文字*/ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .box>div { width: 200px; height: 200px; border: 1px solid #FF2869; position: absolute; background-color: #333; opacity: 0.5; transition: transform 0.4s; /*transform动画效果*/ } .box .out-front { transform: translateZ(100px); background: url(./b1.jpg); background-size: cover; } .box .out-back { transform: translateZ(-100px) rotateY(180deg); background: url(./b2.jpg); background-size: cover; } .box .out-left { transform: translateX(-100px) rotateY(-90deg); background: url(./b3.jpg); background-size: cover; } .box .out-right { transform: translateX(100px) rotateY(90deg); background: url(./b4.jpg); background-size: cover; } .box .out-top { transform: translateY(-100px) rotateX(90deg); background: url(./b5.jpg); background-size: cover; } .box .out-bottom { transform: translateY(100px) rotateX(-90deg); background: url(./b6.jpg); background-size: cover; } .box>span { display: block; width: 100px; height: 100px; border: 1px solid #FF2869; position: absolute; top: 50px; left: 50px; } .box .in-front { transform: translateZ(50px); background: url(./b1.jpg); background-size: cover; } .box .in-back { transform: translateZ(-50px) rotateY(180deg); background: url(./b2.jpg); background-size: cover; } .box .in-left { transform: translateX(-50px) rotateY(-90deg); background: url(./b3.jpg); background-size: cover; } .box .in-right { transform: translateX(50px) rotateY(90deg); background: url(./b4.jpg); background-size: cover; } .box .in-top { transform: translateY(-50px) rotateX(90deg); background: url(./b5.jpg); background-size: cover; } .box .in-bottom { transform: translateY(50px) rotateX(-90deg); background: url(./b6.jpg); background-size: cover; }