讓互動更加生動！巧用CSS實現滑鼠跟隨 3D 旋轉效果-css教學-PHP中文網

這篇文章跟大家介紹如何使用CSS實現有趣的滑鼠跟隨 3D 旋轉效果，讓互動更加生動，希望對大家有幫助！

讓互動更加生動！巧用CSS實現滑鼠跟隨 3D 旋轉效果

今天，群組朋友問了這樣一個問題，如下所示的滑鼠跟隨互動效果，如何實現：

#簡單分析一下，這個交互效果主要有兩個核心：

借助了CSS 3D 的能力
元素的旋轉需求和滑鼠的移動相結合

本文，就將講述如何使用純CSS 實現類似的互動效果，以及，借助JavaScript 綁定滑鼠事件，快速還原上述效果。【推薦學習：css影片教學】

純CSS 實作元素的3D 旋轉

如果不借助JavaScript，僅僅只是CSS，如何實現類似的3D 旋轉效果呢？

這裡會運用到一個名為正反旋轉相消或是正負旋轉相消的小技巧。嗯，名字取的很奇怪，好像數學概念一樣。

在動畫中，旋轉是非常常用的屬性，

{ transform: rotate(90deg); }

登入後複製

如果我們給不同的層級的元素，添加不同方向的旋轉，會發生什麼？

先假設場景，我們有這樣的一層HTML 結構：

  正负旋转相消3D动画

登入後複製

樣式如下：

##.content內是我們的主要內容，好了，現在想像一下，如果父元素.rotate進行正向linear 360° 旋轉，最外層的父級元素.reverseRotate進行反向linear 360° 旋轉，效果會是啥樣？

CSS 程式碼如下：

.rotate { animation: rotate 5s linear infinite; } .reverseRotate { animation: reverseRotate 5s linear infinite; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes reverseRotate { 100% { transform: rotate(-360deg); } }

登入後複製

我們可以得到這樣一個動畫（注意，下圖是GIF 不是PNG）：

神奇！因為一正一反的旋轉，且緩動函數一樣，所以整個

.content看上去依然是靜止的！注意，這裡整個.content靜止的非常重要。

有讀者看到這裡就要罵人了，作者你個智障，靜止了不就沒動畫了嗎？哪來的動畫技巧？

別急！雖然看起來是靜止的，但其實祖先兩個元素都是在旋轉的！這會看起來風平浪靜的效果底下其實是暗流湧動。用開發者工具選取最外層祖先元素是這樣的：

既然如此，我們繼續思考，如果我在其中旋轉的一個父元素上，添加一些別的動畫會是什麼效果？想想就很刺激。

首先，我們先為這幾個元素加入CSS 3D 轉換：

div { transform-style: preserve-3d; perspective: 100px; }

登入後複製

接著，試著修改上面的旋轉動畫，在內層旋轉上額外加入一個rotateX：

@keyframes rotate { 0% { transform: rotateX(0deg) rotateZ(0deg); } 50% { transform: rotateX(40deg) rotateZ(180deg); } 100% { transform: rotateX(0deg) rotateZ(360deg); } }

登入後複製

效果如下：

Wow，這裡要好好理解一下。由於內容

.content層是靜止的但其實外層兩個圖層都在旋轉，透過設定額外的rotateX(40deg)，相當於疊加多了一個動畫，由於正反旋轉抵消了，所有整個動畫只能看到旋轉的rotateX(40deg)這個動畫，產生了上述的效果。

這樣，在沒有 JavaScript 介入的情況下，我們就模擬了題圖所示的 3D 效果。當然，僅僅是這樣，與使用者的連動是不夠的，如果一定要結合滑鼠移動，我們就需要 JavaScript 的一些輔助了。

借助Javascript 實現滑鼠跟隨3D 旋轉動效

我們的目標是實現這樣一個動畫效果：

這裡，我們其實有兩個核心元素：

滑鼠活動區域
旋轉物件本身

#滑鼠在

滑鼠活動區域內的移動，會影響旋轉物件本身的3D 旋轉，而旋轉的方向其實可以被分解為X 軸方向與Y 軸方向。

我們來看一下，假設我們的 HTML 結構如下：

登入後複製

得到這樣一個圖形：

这里，body的范围就是整个鼠标可活动区域，也是我们添加鼠标的mousemove事件的宿主 target，而#element就是需要跟随鼠标一起转动的旋转物体本身。

因为整个效果是需要基于 CSS 3D 的，我们首先加上简单的 CSS 3D 效果：

body { width: 100vw; height: 100vh; transform-style: preserve-3d; perspective: 500px; } div { width: 200px; height: 200px; background: #000; transform-style: preserve-3d; }

登入後複製

效果如下：

没有什么不一样。这是因为还没有添加任何的 3D 变换，我们给元素添加 X、Y 两个方向的rotate()试一下（注意，这里默认的旋转圆心即是元素中心）：

div { transform: rotateX(15deg) rotateY(30deg); }

登入後複製

效果如下，是有那么点意思了：

好，接下来，我们的目标就是通过结合 mouseover 事件，让元素动起来。

控制 X 方向的移动

当然，为了更加容易理解，我们把动画拆分为 X、Y 两个方向上的移动。首先看 X 方向上的移动：

讓互動更加生動！巧用CSS實現滑鼠跟隨 3D 旋轉效果

这里，我们需要以元素的中心为界：

当鼠标在中心右侧连续移动，元素绕 Y 轴移动，并且值从 0 开始，越来越大，范围为(0, +∞)deg
反之，当鼠标在中心左侧连续移动，元素绕 Y 轴移动，并且值从 0 开始，越来越小，范围为(-∞, 0)deg

这样，我们可以得到这样一个公式：

rotateY = (鼠标 x 坐标 - 元素左上角 x 坐标 - 元素宽度的一半)deg

通过绑定 onmousemove 事件，我们尝试一下：

const mouseOverContainer = document.getElementsByTagName("body")[0]; const element = document.getElementById("element"); mouseOverContainer.onmousemove = function(e) { let box = element.getBoundingClientRect(); let calcY = e.clientX - box.x - (box.width / 2); element.style.transform = "rotateY(" + calcY + "deg) "; }

登入後複製

效果如下：

讓互動更加生動！巧用CSS實現滑鼠跟隨 3D 旋轉效果

好吧，旋转的太夸张了，因此，我们需要加一个倍数进行控制：

const multiple = 20; const mouseOverContainer = document.getElementsByTagName("body")[0]; const element = document.getElementById("element"); mouseOverContainer.onmousemove = function(e) { let box = element.getBoundingClientRect(); let calcY = (e.clientX - box.x - (box.width / 2)) / multiple; element.style.transform = "rotateY(" + calcY + "deg) "; }

登入後複製

通过一个倍数约束后，效果好了不少：

控制 Y 方向的移动

同理，我们利用上述的方式，同样可以控制 Y 方向上的移动：

const multiple = 20; const mouseOverContainer = document.getElementsByTagName("body")[0]; const element = document.getElementById("element"); mouseOverContainer.onmousemove = function(e) { let box = element.getBoundingClientRect(); let calcX = (e.clientY - box.y - (box.height / 2)) / multiple; element.style.transform = "rotateX(" + calcX + "deg) "; };

登入後複製

效果如下：

当然，在这里，我们会发现方向是元素运动的方向是反的，所以需要做一下取反处理，修改下calcX的值，乘以一个-1即可：

let calcX = (e.clientY - box.y - (box.height / 2)) / multiple * -1;

登入後複製

结合 X、Y 方向的移动

OK，到这里，我们只需要把上述的结果合并一下即可，同时，上面我们使用的是onmousemove触发每一次动画移动。现代 Web 动画中，我们更倾向于使用requestAnimationFrame去优化我们的动画，确保每一帧渲染一次动画即可。

完整的改造后的代码如下：

const multiple = 20; const mouseOverContainer = document.getElementsByTagName("body")[0]; const element = document.getElementById("element"); function transformElement(x, y) { let box = element.getBoundingClientRect(); let calcX = -(y - box.y - (box.height / 2)) / multiple; let calcY = (x - box.x - (box.width / 2)) / multiple; element.style.transform = "rotateX("+ calcX +"deg) " + "rotateY("+ calcY +"deg)"; } mouseOverContainer.addEventListener('mousemove', (e) => { window.requestAnimationFrame(function(){ transformElement(e.clientX, e.clientY); }); });

登入後複製

至此，我们就能简单的实现题图所示的鼠标跟随 3D 旋转动效：

设置平滑出入

现在，还有最后一个问题，就是当我们的鼠标离开活动区域时，元素的 transform 将停留在最后一帧，正确的表现应该是复原到原状。因此，我们还需要添加一些事件监听做到元素的平滑复位。

通过一个mouseleave事件配合元素的transition即可。

div { // 与上述保持一致... transition: all .1s; }

登入後複製

mouseOverContainer.addEventListener('mouseleave', (e) => { window.requestAnimationFrame(function(){ element.style.transform = "rotateX(0) rotateY(0)"; }); });

登入後複製

至此，我们就可以完美的实现平滑出入，整体效果最终如下：