怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

這篇文章主要講解了“怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果”吧！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),潮安企業(yè)網(wǎng)站建設(shè),潮安品牌網(wǎng)站建設(shè),網(wǎng)站定制,潮安網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,潮安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

純 CSS 實(shí)現(xiàn)元素的 3D 旋轉(zhuǎn)

如果不借助 JavaScript，僅僅只是 CSS，如何實(shí)現(xiàn)類似的 3D 旋轉(zhuǎn)效果呢？

這里會(huì)運(yùn)用到一種名為正反旋轉(zhuǎn)相消或者是正負(fù)旋轉(zhuǎn)相消的小技巧。嗯，名字起的很奇怪，好像數(shù)學(xué)概念一樣。

在動(dòng)畫中，旋轉(zhuǎn)是非常常用的屬性，

{
  transform: rotate(90deg);
}

如果我們給不同的層級(jí)的元素，添加不同方向的旋轉(zhuǎn)，會(huì)發(fā)生什么呢？

首先假設(shè)一下場景，我們有這樣的一層 HTML 結(jié)構(gòu)：

<div class="reverseRotate">
    <div class="rotate">
        <div class="content">正負(fù)旋轉(zhuǎn)相消3D動(dòng)畫</div>
    </div>
</div>

樣式如下：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

.content 內(nèi)是我們的主要內(nèi)容，好了，現(xiàn)在想象一下，如果父元素 .rotate 進(jìn)行正向 linear 360° 旋轉(zhuǎn)，最外層的父級(jí)元素 .reverseRotate 進(jìn)行反向 linear 360° 旋轉(zhuǎn)，效果會(huì)是啥樣？

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

我們可以得到這樣一種動(dòng)畫（注意，下圖是 GIF 不是 PNG）：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

神奇！因?yàn)橐徽环吹男D(zhuǎn)，且緩動(dòng)函數(shù)一樣，所以整個(gè) .content 看上去依然是靜止的！注意，這里整個(gè) .content 靜止的非常重要。

有讀者看到這里就要罵人了，作者你個(gè)智障，靜止了不就沒動(dòng)畫了嗎？哪來的動(dòng)畫技巧？

別急！雖然看上去是靜止的，但是其實(shí)祖先兩個(gè)元素都是在旋轉(zhuǎn)的！這會(huì)看上去風(fēng)平浪靜的效果底下其實(shí)是暗流涌動(dòng)。用開發(fā)者工具選取最外層祖先元素是這樣的：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

既然如此，我們繼續(xù)思考，如果我在其中旋轉(zhuǎn)的一個(gè)父元素上，添加一些別的動(dòng)畫會(huì)是什么效果？想想就很刺激。

首先，我們先給這幾個(gè)元素添加 CSS 3D 轉(zhuǎn)換：

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

接著，嘗試修改上面的旋轉(zhuǎn)動(dòng)畫，在內(nèi)層旋轉(zhuǎn)上額外添加一個(gè) rotateX：

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

效果如下：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

Wow，這里需要好好理解一下。由于內(nèi)容 .content 層是靜止的但其實(shí)外層兩個(gè)圖層都在旋轉(zhuǎn)，通過設(shè)置額外的 rotateX(40deg)，相當(dāng)于疊加多了一個(gè)動(dòng)畫，由于正反旋轉(zhuǎn)抵消了，所有整個(gè)動(dòng)畫只能看到旋轉(zhuǎn)的 rotateX(40deg) 這個(gè)動(dòng)畫，產(chǎn)生了上述的效果。

這樣，在沒有 JavaScript 介入的情況下，我們就模擬了題圖所示的 3D 效果。當(dāng)然，僅僅是這樣，與用戶的聯(lián)動(dòng)是不夠的，如果一定要結(jié)合鼠標(biāo)移動(dòng)，我們就需要 JavaScript 的一些輔助了。

借助 Javascript 實(shí)現(xiàn)鼠標(biāo)跟隨 3D 旋轉(zhuǎn)動(dòng)效

我們的目標(biāo)是實(shí)現(xiàn)這樣一個(gè)動(dòng)畫效果：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

這里，我們其實(shí)有兩個(gè)核心元素：

  • 鼠標(biāo)活動(dòng)區(qū)域

  • 旋轉(zhuǎn)物體本身

鼠標(biāo)在鼠標(biāo)活動(dòng)區(qū)域內(nèi)的移動(dòng)，會(huì)影響旋轉(zhuǎn)物體本身的 3D 旋轉(zhuǎn)，而旋轉(zhuǎn)的方向其實(shí)可以被分解為 X 軸方向與 Y 軸方向。

我們來看一下，假設(shè)我們的 HTML 結(jié)構(gòu)如下：

<body>
    <div id="element"></div>
</body>

得到這樣一個(gè)圖形：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

這里，body 的范圍就是整個(gè)鼠標(biāo)可活動(dòng)區(qū)域，也是我們添加鼠標(biāo)的 mousemove 事件的宿主 target，而 #element 就是需要跟隨鼠標(biāo)一起轉(zhuǎn)動(dòng)的旋轉(zhuǎn)物體本身。

因?yàn)檎麄€(gè)效果是需要基于 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;
}

效果如下：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

沒有什么不一樣。這是因?yàn)檫€沒有添加任何的 3D 變換，我們給元素添加 X、Y 兩個(gè)方向的 rotate() 試一下（注意，這里默認(rèn)的旋轉(zhuǎn)圓心即是元素中心）：

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

效果如下，是有那么點(diǎn)意思了：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

好，接下來，我們的目標(biāo)就是通過結(jié)合 mouseover 事件，讓元素動(dòng)起來。

控制 X 方向的移動(dòng)

當(dāng)然，為了更加容易理解，我們把動(dòng)畫拆分為 X、Y 兩個(gè)方向上的移動(dòng)。首先看 X 方向上的移動(dòng)：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

這里，我們需要以元素的中心為界：

  • 當(dāng)鼠標(biāo)在中心右側(cè)連續(xù)移動(dòng)，元素繞 Y 軸移動(dòng)，并且值從 0 開始，越來越大，范圍為(0, +∞)deg

  • 反之，當(dāng)鼠標(biāo)在中心左側(cè)連續(xù)移動(dòng)，元素繞 Y 軸移動(dòng)，并且值從 0 開始，越來越小，范圍為(-∞, 0)deg

這樣，我們可以得到這樣一個(gè)公式：

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

效果如下：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

好吧，旋轉(zhuǎn)的太夸張了，因此，我們需要加一個(gè)倍數(shù)進(jìn)行控制：

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

通過一個(gè)倍數(shù)約束后，效果好了不少：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

控制 Y 方向的移動(dòng)

同理，我們利用上述的方式，同樣可以控制 Y 方向上的移動(dòng)：

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

效果如下：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

當(dāng)然，在這里，我們會(huì)發(fā)現(xiàn)方向是元素運(yùn)動(dòng)的方向是反的，所以需要做一下取反處理，修改下 calcX 的值，乘以一個(gè) -1 即可：

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

結(jié)合 X、Y 方向的移動(dòng)

OK，到這里，我們只需要把上述的結(jié)果合并一下即可，同時(shí)，上面我們使用的是 onmousemove 觸發(fā)每一次動(dòng)畫移動(dòng)。現(xiàn)代 Web 動(dòng)畫中，我們更傾向于使用 requestAnimationFrame 去優(yōu)化我們的動(dòng)畫，確保每一幀渲染一次動(dòng)畫即可。

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

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

至此，我們就能簡單的實(shí)現(xiàn)題圖所示的鼠標(biāo)跟隨 3D 旋轉(zhuǎn)動(dòng)效：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

設(shè)置平滑出入

現(xiàn)在，還有最后一個(gè)問題，就是當(dāng)我們的鼠標(biāo)離開活動(dòng)區(qū)域時(shí)，元素的 transform 將停留在最后一幀，正確的表現(xiàn)應(yīng)該是復(fù)原到原狀。因此，我們還需要添加一些事件監(jiān)聽做到元素的平滑復(fù)位。

通過一個(gè) mouseleave 事件配合元素的 transition 即可。

div {
    // 與上述保持一致...
    transition: all .1s;
}
mouseOverContainer.addEventListener('mouseleave', (e) => {
  window.requestAnimationFrame(function(){
    element.style.transform = "rotateX(0) rotateY(0)";
  });
});

至此，我們就可以完美的實(shí)現(xiàn)平滑出入，整體效果最終如下：

怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果

感謝各位的閱讀，以上就是“怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站標(biāo)題：怎么用巧用CSS實(shí)現(xiàn)鼠標(biāo)跟隨3D旋轉(zhuǎn)效果
本文URL：http://muchs.cn/article14/pppege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、搜索引擎優(yōu)化、Google、響應(yīng)式網(wǎng)站、建站公司、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作