首頁 >web前端 >css教學 >巧用CSS實現滑鼠跟隨 3D 旋轉效果,讓互動更加生動!

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

青灯夜游
青灯夜游轉載
2022-09-06 10:34:322808瀏覽

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

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

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

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

  • 借助了CSS 3D 的能力

  • 元素的旋轉需求和滑鼠的移動相結合

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

純CSS 實作元素的3D 旋轉

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

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

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

{
  transform: rotate(90deg);
}

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

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

<div>
    <div>
        <div>正负旋转相消3D动画</div>
    </div>
</div>

樣式如下:

##.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 結構如下:

    <div></div>
得到這樣一個圖形:

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

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

完整的代码,你可以戳这里:CodePen Demo -- CSS 3D Rotate With Mouse Move

(学习视频分享:web前端

以上是巧用CSS實現滑鼠跟隨 3D 旋轉效果,讓互動更加生動!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除