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

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

大家先看效果

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

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

鼠標事件

這次效果，咱們需要用JS實現。主要是監聽鼠標事件，計算鼠標滑動距離，改變魔方的rotateX、rotateY

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個魔方，一個小一點，使小的魔方剛好在大魔方中心位置

<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>

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

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

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

然后我們通過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場景都學會了嗎？

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

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

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

使用第三方瀏覽器過程中，前進、后退、刷新、新建、關閉、向下翻頁、向下翻頁等操作都是通過點擊按鈕來完成，第三方瀏覽器一般帶有鼠標手勢操作，充分利用這一功能，可以極大的簡化操作而帶來更為便捷的瀏覽體驗。

下面分享一下使用鼠標手勢在360瀏覽器中的操作方法。

所謂的鼠標手勢，就是屏幕上按住鼠標右鍵不動，來畫特定的運行軌跡，以實現特定的功能。

一、瀏覽器瀏覽網頁基本操作

1.1后退

在瀏覽網頁過程中，后操作操作是使用相當頻繁的操作步驟，一般操作我們會直接點擊瀏覽器的后退按鈕，但如何使用鼠標手勢，只需按住鼠標右鍵不動，向左滑動即可實現后退的目的。

1.2前進

進行的后退操作，要進行前進操作，同樣只需按住鼠標右鍵不動，向右滑動網頁就前進到剛才瀏覽的界面。

1.3向上翻頁

按住鼠標右鍵不動，向上滑動，網頁就向上翻一頁。

1.4 向下翻頁

按住鼠標右鍵不動，向下滑動，網頁就向下翻一頁。

二、高級鼠標手勢

2.1定位到頁面頂部

按住鼠標右鍵不動，先向下滑動再向上滑動，就可以回到網頁的最頂部。

2.2定位到頁面底部

按住鼠標右鍵不動，先向上滑動再向下滑動，就可以回到網頁的最底部。

2.3關閉當前頁面

按住鼠標右鍵不動，先向左下方滑動再向右滑動，就可以把當面頁面關閉。

2.4刷新當前頁面

常規操作是按f5或者右鍵點擊刷新，用鼠標手勢是按住鼠標右鍵不動，先向右滑動再向下滑動。

2.5自定義手勢

如果以上手勢你覺得不合適你的習慣，你在瀏覽器設置可以自定義，以達到你想的效果。

以上就是鼠標手勢在瀏覽網頁時的應用，充分利用鼠標手勢可以提高效率，減少操作量，是一種新的瀏覽體驗！文中錯誤及不足在所難免，希望你批評指正。

T之家 3 月 6 日消息，根據微軟官方披露的 Microsoft Edge 策略支持文檔，微軟計劃最早在 Edge 112 版本中添加鼠標手勢功能。

目前，這一功能已出現在 Edge 瀏覽器的 Dev 預覽版灰度測試中，IT之家小伙伴可在設置中開啟鼠標手勢，并進行高度自定義。

從圖中可以看到，Edge 瀏覽器的鼠標手勢包含十多項操作，每一項都可以自定義功能。

微軟表示，此功能為用戶提供了一種簡單的方法來完成任務，例如向前或向后滾動、打開新選項卡、刷新頁面等。他們可以通過按住鼠標右鍵在網頁上繪制某些模式來完成任務，而不是單擊按鈕或使用鍵盤快捷方式。

在線咨詢

上一篇：HTML5常見的面試問題，對于初學者也是一個入門基礎
下一篇：如何解決Rmd無法編譯為HTML的問題？8種常用的解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

鼠標事件

示例代碼

深入學習

結語

一、瀏覽器瀏覽網頁基本操作

二、高級鼠標手勢

您的項目需求