前端使用JavaScript結(jié)合CSS實現(xiàn)3D旋轉(zhuǎn)跟隨鼠標(biāo)變化
簡單分析一下,這個交互效果主要有兩個核心:
- 借助了 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)平滑出入,整體效果最終如下:
到此這篇關(guān)于前端使用JavaScript結(jié)合CSS實現(xiàn)3D旋轉(zhuǎn)跟隨鼠標(biāo)變化的文章就介紹到這了,更多相關(guān)JS 3D旋轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap每天必學(xué)之模態(tài)框(Modal)插件
Bootstrap每天必學(xué)之模態(tài)框(Modal)插件,模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。通常,目的是顯示來自一個單獨的源的內(nèi)容,可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等,感興趣的小伙伴們可以參考一下2016-04-04微信小程序自定義組件傳值 頁面和組件相互傳數(shù)據(jù)操作示例
這篇文章主要介紹了微信小程序自定義組件傳值 頁面和組件相互傳數(shù)據(jù)操作,結(jié)合實例形式分析了微信小程序常見傳值操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-05-05JS組件Bootstrap dropdown組件擴展hover事件
bootstrap的下拉組件,需要點擊click時,方可展示下拉列表。因此對于喜歡簡單少操作的大家來說,點擊一下多少帶來不便,因此,引入hover監(jiān)聽,鼠標(biāo)經(jīng)過自動展示下拉框。這篇文章主要介紹了JS組件Bootstrap dropdown組件擴展hover事件,感興趣的小伙伴們可以參考一下2016-04-04Gulp實現(xiàn)靜態(tài)網(wǎng)頁模塊化的方法詳解
眾所周知Gulp.js 是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務(wù)。下面這篇文章主要給大家介紹了關(guān)于Gulp實現(xiàn)靜態(tài)網(wǎng)頁模塊化的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下。2018-01-01詳解TypeScript2.0標(biāo)記聯(lián)合類型
這篇文章主要介紹了TypeScript2.0標(biāo)記聯(lián)合類型,對TS感興趣的同學(xué),可以參考下2021-05-05一些經(jīng)常會用到的Javascript檢測函數(shù)
一些經(jīng)常會用到的Javascript檢測函數(shù),都是在prototype上面的擴展。2010-05-05