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場景都學會了嗎？

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

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

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

易拖拽

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft; //拖拽距離
disY=oEvent.clientY-oDiv.offsetTop; //拖拽距離

oDiv.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

oDiv.onmouseup=function ()
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序問題:鼠標拖拽過快,鼠標指針與拖拽div對象脫離

解決方法:直接給document加事件(因為div對象范圍太小,鼠標移動就與拖拽div對象脫離)

將oDiv改成document對象

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序問題: FF下，空Div拖拽Bug(殘影)

解決方法: 阻止默認事件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false; //阻止默認事件(拖動殘影)
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

防止拖出頁面

然大多數時候，鍵盤黨的電腦高手們都會嫻熟地運用各種快捷鍵來提高各種操作的效率，這種方式固然夠快夠精練，但卻需要一定的記憶力和練習才能積累下來靈活運用。

而除快捷鍵以外，我們手上的「鼠標」其實也能變成另一個強大好用的效率加·速·器！MouseInc 是一款小巧綠色免費的系統全局鼠標手勢軟件，它能為你自定義一些鼠標手勢來完成各種常用頻繁的軟件操作，比起快捷鍵也更容易上手，妥妥的裝機必備輔助工具……

好用的全局鼠標手勢軟件 MouseInc

MouseInc 是一款 Windows 上小巧好用且免費綠色的鼠標手勢軟件 / 鼠標增強輔助工具。類似于 WGestures，可以幫你將鼠標打造成實用高效的操作利器，僅用鼠標就能完成很多復雜的功能和動作，讓你使用電腦更加方便，更有效率。

那么什么是「鼠標手勢」呢？其實就是按住鼠標右鍵不放，然后在屏幕上畫出一個特定的手勢線條，當手放開時，鼠標手勢軟件會識別出用戶所畫的手勢圖案的不同，來執行一組預定的動作，這樣就能通過鼠標來做出類似鍵盤按下“快捷鍵”的作用，比如劃個 L 線來關閉當前窗口。

MouseInc 提供了很多不同的動作和功能供你設置，而且除了鼠標手勢以外，還提供了很多額外的輔助功能，比如截圖、文字識別、創建自定義全局熱鍵、復制增強、搜索增強等多種實用功能。

MouseInc 軟件截圖

雙擊 MouseInc.exe 啟動軟件之后，可以在右下角系統托盤圖標里找到它，右鍵選擇“打開設置”即可調出設置界面。如首次啟動時軟件界面為英文，可以點擊右上角的“Lang”將語言修改為“中文簡體”即可。

MouseInc 的鼠標手勢能做點什么？

通過 MouseInc 的自定義鼠標手勢，我們可以做出很多「動作」，比如：復制粘貼、關閉窗口、最大最小化窗口、快速截圖、搜索選中文字、OCR 識別文字、打開文件夾、調整音量、調整顯示器亮度等等，而且它還可以通過鼠標手勢來「模擬按下快捷鍵」、「運行.exe / 批處理」等功能，可以組合起來做出很多不同的功能。

MouseInc 還支持復合動作，比如選中一個網址，畫 P 直接打開 ping 命令。選中文本以后，畫 S 直接打開瀏覽器搜索選中的文字等。

更多的用途和功能就下載回去細細把玩吧，MouseInc 也提供了比較詳細的文檔可以參考，后面也有演示的視頻。

全局鼠標手勢

以前比較流行的鼠標手勢是在瀏覽器里作為插件出現的，作用范圍也只限于瀏覽器內。而 MouseInc 則能「作用于系統全局」的，你可以將手勢應用在任意軟件上，包括瀏覽器，所以它可以代替瀏覽器里的各種鼠標手勢插件了。

MouseInc 也可以設置程序黑名單，在部分應用或者游戲等里面，不會啟用鼠標手勢防止出現混亂情況。

良心免費、純綠色免安裝

MouseInc 是純綠色的軟件，軟件體積僅 200 多 KB，無需安裝，單文件無依賴，占用系統資源極低，可以便攜運行，隨便放在硬盤或 U 盤里的任何目錄下都能運行，所有配置保存在同目錄的 MouseInc.json 文件里。

作者也曾承諾過，MouseInc 將永久免費，而且無廣告、不掃描硬盤、不上傳任何隱私。所以 MouseInc 還是很良心的，值得一試。

鼠標手勢 vs 鍵盤快捷鍵

話說回來，在大部分使用電腦 (無需頻繁打字) 的時間里，很多人都像我一樣「單手使用鼠標」操作電腦。毫不夸張地說，這時鼠標手勢的方便程度就會明顯比鍵盤高了！你不必強迫自己用另一只手來按鍵盤，就能實施各種各樣的動作，絕對是懶人必備的神器！習慣后真的會離不開。

你想想，上網時只需一只手握著鼠標就能：左右切換瀏覽器的標簽頁、關閉網頁、刷新、前進后退、調整音量等等都能輕松搞定，這難道還要去按鍵盤嗎？

當然了，鼠標手勢與鍵盤熱鍵兩者其實并不沖突，我認為是互補關系的。比如在編程或者使用一些較為復雜的專業軟件時，功能操作非常多，而鼠標手勢是無法定義得太多的，加上雙手頻繁打字的話，按快鍵又比鼠標更快，所以快捷鍵的作用還是非常巨大且無法被完全取代的。

而在 MouseInc 里，除了定制鼠標手勢外，它其實也提供了「自定義全局快捷鍵」的功能，如果你是鍵盤黨，一樣可以用它來增強你的熱鍵。

所以，如果想要更好地提升工作效率以及電腦使用的便捷程度，我建議是全局鼠標手勢 + 快捷鍵一起搭配使用才是王道。

MouseInc 主要功能

MouseInc 除了鼠標手勢的“本行”功能外，還提供了不少特色的其他輔助功能，大家可以多多摸索嘗試：

鼠標手勢：按住右鍵滑動即可開始使用，提供自定義。
配置細微：可自由修改手勢寬度，顏色，識別靈敏度等。
支持黑名單：支持特定軟件自定義手勢，支持復合動作。
高質量截圖：可保留窗口陰影、保留鼠標指針，半透明（包括毛玻璃特效）。
OCR 文字識別：鼠標手勢畫一個四邊形（下左上右）即可體驗。
按鍵回顯：可在屏幕上顯示您所有的鍵盤按鍵，方便您在錄制視頻包含按鍵信息。
邊緣滾動：在屏幕四邊滾動滾輪，可以觸發特殊操作。目前有音量調節和程序切換功能。
復制增強：選中文字按下兩次 Ctrl+C 后，會彈出快捷操作菜單，可進行搜索等。
快速音量調節：按住 Alt 時，滾動滾輪可以快速調節音量大小。
滾輪穿透：可使得滾輪可以直接滾動未激活窗口。Win10 自帶此功能，推薦 Win7 開啟。
自然滾動：把內容滾動方向改變為隨屏幕方向。讓你保持和 macOS 一致的使用習慣。
全局熱鍵：除了鼠標手勢外，它也能提供自定義全局熱鍵功能。

總結

總之， MouseInc 是一款不可多得的免費系統全局鼠標手勢軟件，也是追求高效工作的朋友必備的利器，如果你對鼠標手勢的操作有興趣，那么你不應該錯過它！

在 WGestures、StrokIt 等同類鼠標手勢工具停止更新后，MouseInc 作為一個新力軍還一直保持著更新，加上免費、小巧、省資源以及純綠色的特性，MouseInc 顯得更加值得選擇。比較可惜的是，目前它僅支持 Windows，使用 Mac 的同學只能眼饞了。原文：https://www.huajclub.com/3302.html

在線咨詢

上一篇：HTML 簡介
下一篇：問題：HTML中表示文字粗體的標記除了使用<strong>外，還可以使用

您的項目需求

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

整合營銷服務商

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

鼠標事件

示例代碼

深入學習

結語

好用的全局鼠標手勢軟件 MouseInc

MouseInc 軟件截圖

良心免費、純綠色免安裝

鼠標手勢 vs 鍵盤快捷鍵

MouseInc 主要功能

總結

您的項目需求