让交互更加生动！巧用CSS实现鼠标跟随 3D 旋转效果
?
簡單分析一下，這個交互效果主要有兩個核心：
-
借助了 CSS 3D 的能力
-
元素的旋轉(zhuǎn)需要和鼠標(biāo)的移動相結(jié)合
本人簡單的說一下如何使用純 CSS 實現(xiàn)類似的交互效果，以及，借助 JavaScript 綁定鼠標(biāo)事件，快速還原上述效果。
純 CSS 實現(xiàn)元素的 3D 旋轉(zhuǎn)
如果不借助 JavaScript，僅僅只是 CSS，如何實現(xiàn)類似的 3D 旋轉(zhuǎn)效果呢？
這里會運用到一種名為正反旋轉(zhuǎn)相消或者是正負旋轉(zhuǎn)相消的小技巧。嗯，名字起的很奇怪，好像數(shù)學(xué)概念一樣。
在動畫中，旋轉(zhuǎn)是非常常用的屬性，
{transform: rotate(90deg); }?
如果我們給不同的層級的元素，添加不同方向的旋轉(zhuǎn)，會發(fā)生什么呢？
首先假設(shè)一下場景，我們有這樣的一層 HTML 結(jié)構(gòu)：
<div class="reverseRotate"><div class="rotate"><div class="content">正負旋轉(zhuǎn)相消3D動畫</div></div> </div>?
.content 內(nèi)是我們的主要內(nèi)容，好了，現(xiàn)在想象一下，如果父元素 .rotate 進行正向 linear 360° 旋轉(zhuǎn)，最外層的父級元素 .reverseRotate 進行反向 linear 360° 旋轉(zhuǎn)，效果會是啥樣？
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);} }?
神奇！因為一正一反的旋轉(zhuǎn)，且緩動函數(shù)一樣，所以整個 .content 看上去依然是靜止的！注意，這里整個 .content 靜止的非常重要。
有讀者看到這里就要罵人了，作者你個智障，靜止了不就沒動畫了嗎？哪來的動畫技巧？
別急！雖然看上去是靜止的，但是其實祖先兩個元素都是在旋轉(zhuǎn)的！這會看上去風(fēng)平浪靜的效果底下其實是暗流涌動。用開發(fā)者工具選取最外層祖先元素是這樣的：
?
?
既然如此，我們繼續(xù)思考，如果我在其中旋轉(zhuǎn)的一個父元素上，添加一些別的動畫會是什么效果？想想就很刺激。
首先，我們先給這幾個元素添加 CSS 3D 轉(zhuǎn)換：
div {transform-style: preserve-3d;perspective: 100px; }?接著，嘗試修改上面的旋轉(zhuǎn)動畫，在內(nèi)層旋轉(zhuǎn)上額外添加一個 rotateX：
@keyframes rotate {0% {transform: rotateX(0deg) rotateZ(0deg);}50% {transform: rotateX(40deg) rotateZ(180deg);}100% {transform: rotateX(0deg) rotateZ(360deg);} }?效果如下：
?
Wow，這里需要好好理解一下。由于內(nèi)容 .content 層是靜止的但其實外層兩個圖層都在旋轉(zhuǎn)，通過設(shè)置額外的 rotateX(40deg)，相當(dāng)于疊加多了一個動畫，由于正反旋轉(zhuǎn)抵消了，所有整個動畫只能看到旋轉(zhuǎn)的 rotateX(40deg) 這個動畫，產(chǎn)生了上述的效果。
這樣，在沒有 JavaScript 介入的情況下，我們就模擬了題圖所示的 3D 效果。當(dāng)然，僅僅是這樣，與用戶的聯(lián)動是不夠的，如果一定要結(jié)合鼠標(biāo)移動，我們就需要 JavaScript 的一些輔助了。
借助 Javascript 實現(xiàn)鼠標(biāo)跟隨 3D 旋轉(zhuǎn)動效
我們的目標(biāo)是實現(xiàn)這樣一個動畫效果：
?
?
這里，我們其實有兩個核心元素：
-
鼠標(biāo)活動區(qū)域
-
旋轉(zhuǎn)物體本身
鼠標(biāo)在鼠標(biāo)活動區(qū)域內(nèi)的移動，會影響旋轉(zhuǎn)物體本身的 3D 旋轉(zhuǎn)，而旋轉(zhuǎn)的方向其實可以被分解為 X 軸方向與 Y 軸方向。
我們來看一下，假設(shè)我們的 HTML 結(jié)構(gòu)如下：
<body><div id="element"></div> </body>?
這里，body 的范圍就是整個鼠標(biāo)可活動區(qū)域，也是我們添加鼠標(biāo)的 mousemove 事件的宿主 target，而 #element 就是需要跟隨鼠標(biāo)一起轉(zhuǎn)動的旋轉(zhuǎn)物體本身。
因為整個效果是需要基于 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() 試一下（注意，這里默認的旋轉(zhuǎn)圓心即是元素中心）：
div {transform: rotateX(15deg) rotateY(30deg); }?效果如下，是有那么點意思了：
?
?
好，接下來，我們的目標(biāo)就是通過結(jié)合 mouseover 事件，讓元素動起來。
控制 X 方向的移動
當(dāng)然，為了更加容易理解，我們把動畫拆分為 X、Y 兩個方向上的移動。首先看 X 方向上的移動：
?
?
這里，我們需要以元素的中心為界：
-
當(dāng)鼠標(biāo)在中心右側(cè)連續(xù)移動，元素繞 Y 軸移動，并且值從 0 開始，越來越大，范圍為(0, +∞)deg
-
反之，當(dāng)鼠標(biāo)在中心左側(cè)連續(xù)移動，元素繞 Y 軸移動，并且值從 0 開始，越來越小，范圍為(-∞, 0)deg
這樣，我們可以得到這樣一個公式：
rotateY = (鼠標(biāo) x 坐標(biāo) - 元素左上角 x 坐標(biāo) - 元素寬度的一半)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) "; }?效果如下：
?
?好吧，旋轉(zhuǎn)的太夸張了，因此，我們需要加一個倍數(shù)進行控制：
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) "; }?通過一個倍數(shù)約束后，效果好了不少：
?
?
控制 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) "; };?效果如下：
?
?當(dāng)然，在這里，我們會發(fā)現(xiàn)方向是元素運動的方向是反的，所以需要做一下取反處理，修改下 calcX 的值，乘以一個 -1 即可：
let calcX = (e.clientY - box.y - (box.height / 2)) / multiple * -1;?
結(jié)合 X、Y 方向的移動
OK，到這里，我們只需要把上述的結(jié)果合并一下即可，同時，上面我們使用的是 onmousemove 觸發(fā)每一次動畫移動?，F(xiàn)代 Web 動畫中，我們更傾向于使用 requestAnimationFrame 去優(yōu)化我們的動畫，確保每一幀渲染一次動畫即可。
完整的改造后的代碼如下：
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);}); });?至此，我們就能簡單的實現(xiàn)題圖所示的鼠標(biāo)跟隨 3D 旋轉(zhuǎn)動效：
?
?
設(shè)置平滑出入
現(xiàn)在，還有最后一個問題，就是當(dāng)我們的鼠標(biāo)離開活動區(qū)域時，元素的 transform 將停留在最后一幀，正確的表現(xiàn)應(yīng)該是復(fù)原到原狀。因此，我們還需要添加一些事件監(jiān)聽做到元素的平滑復(fù)位。
通過一個 mouseleave 事件配合元素的 transition 即可。
div {// 與上述保持一致...transition: all .1s; }?
mouseOverContainer.addEventListener('mouseleave', (e) => {window.requestAnimationFrame(function(){element.style.transform = "rotateX(0) rotateY(0)";}); });至此，我們就可以完美的實現(xiàn)平滑出入，整體效果最終如下：
?
?
總結(jié)
以上是生活随笔為你收集整理的让交互更加生动！巧用CSS实现鼠标跟随 3D 旋转效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： macbook频繁掉线的解决办法
- 下一篇： PPT中这8个隐藏技巧-掌握了马上让你幸