面文章有制作水晶魔方，這次我們升級一下它的功能，通過鼠標控制魔方旋轉。

大家先看效果

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

鼠標事件

這次效果，咱們需要用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，大家自行下載使用

// 角度初始化
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;
  // 鼠標抬起時結束
};

這樣就可以實現魔方跟隨鼠標移動旋轉了，但是大家可以看到上方的示例圖，有一個展開和收起的效果，是如何實現的呢？

深入學習

之前咱們的魔方圖是這樣的

現在，畫出2個魔方，一個小一點，使小的魔方剛好在大魔方中心位置

<div class="content">
  <div class="box">
    <!-- 外層魔方 -->
    <div class="out-front">前</div>
    <div class="out-back">后</div>
    <div class="out-left">左</div>
    <div class="out-right">右</div>
    <div class="out-top">上</div>
    <div class="out-bottom">下</div>
    <!-- 內層魔方 -->
    <span class="in-front"></span>
    <span class="in-back"></span>
    <span class="in-left"></span>
    <span class="in-right"></span>
    <span class="in-top"></span>
    <span class="in-bottom"></span>
  </div>
</div>

按照之前章節的樣式，進行調節。使小的魔方剛好在大魔方中心位置。

樣式如下：

.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;
}

然后我們通過JS控制展開和收起效果

var clickNum = 1;    //點擊次數
$('.box').children().click(function () {
  // 如果點擊次數是奇數就展開，偶數就收起
  if (clickNum % 2 == 0) {
    // 收起
    $('.out-front').css({ 
      transform: 'translateZ(100px)' 
    });
    $('.out-back').css({ 
      transform: 'translateZ(-100px) rotateY(180deg)'
    });
    $('.out-left').css({ 
      transform: 'translateX(-100px) rotateY(-90deg)'
    });
    $('.out-right').css({
      transform: 'translateX(100px) rotateY(90deg)'
    });
    $('.out-top').css({
      transform: 'translateY(-100px) rotateX(90deg)'
    });
    $('.out-bottom').css({
      transform: 'translateY(100px) rotateX(-90deg)'
    });
  } else {
    // 展開
    $('.out-front').css({ 
      transform: 'translateZ(200px)'
    });
    $('.out-back').css({ 
      transform: 'translateZ(-200px) rotateY(180deg)'
    });
    $('.out-left').css({ 
      transform: 'translateX(-200px) rotateY(-90deg)'
    });
    $('.out-right').css({ 
      transform: 'translateX(200px) rotateY(90deg)'
    });
    $('.out-top').css({ 
      transform: 'translateY(-200px) rotateX(90deg)'
    });
    $('.out-bottom').css({ 
      transform: 'translateY(200px) rotateX(-90deg)'
    });
  }
  clickNum++;
});

// box 的所有子元素添加鼠標手勢樣式
$('.box').children().mouseenter(function () {   
  $(this).css({ cursor: 'pointer' });
});

OK，這樣我們的 CSS3 3D魔方鼠標控制酷炫效果就實現了。

結語

大家學到了什么？JS鼠標事件都了解了吧？CSS3 3D場景都學會了嗎？

關注我，學習更多前端知識，但不止于前端哦！

小伙伴們，有問題可以評論區留言哦，歡迎大家點評。

謝謝大家一直以來的支持。

lt;script type="text/javascript">

/* 鼠標特效 */

var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?富強?","?民主?","?文明?","?和諧?","?自由?","?平等?","?公正?","?法治?","?愛國?","?敬業?","?誠信?","?友善?"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); });

</script>