前言

最近在 gsap 上看到一個有趣的動效（Cursor-driven perspective tilt），于是決定自己實現(xiàn)一下，下面將介紹實現(xiàn)的過程，希望你能喜歡。

觀察動效

1. 卡片的傾斜角度會隨著鼠標(biāo)的移入在 x 軸和 y 軸上向內(nèi)進行傾斜。
2. 卡片上的文字是懸浮在卡片，給人一種懸空在空中的錯覺。

技術(shù)拆解

要實現(xiàn)這種 3D 的效果，在 css 中你首先想到的是什么？

在 CSS 中有三個屬性實現(xiàn) 3D 效果至關(guān)重要。它們分別是 perspective、transform-style: preserve-3d、transform: rotateX() rotateY()。下面將詳細的介紹他們在 3D 動效中的作用。

1. perspective (透視/視距)：它是 3D 的靈魂，如果沒有它，你看到的效果看起來只像是在平面上進行拉伸和縮放。你可以理解它是3維空間中的z軸，定義觀察者距離 z = 0平面的距離。通常設(shè)定在父容器上，數(shù)值越?。ㄈ?00px），透視畸變越強烈（近大遠小極度明顯）；數(shù)值越大（如 2000px），效果越平緩。
2. transform-style: preserve-3d ：它的作用是告訴子元素（文字層）也要保持在 3D 空間中，這樣我們看到的容器的內(nèi)容是有深度的，同時也可以在側(cè)面看到元素與元素之間的距離。當(dāng)父元素設(shè)置了transform-style: preserve-3d 的時候，同時子元素需要設(shè)置 transform: translateZ()。
3. transform: rotateX() rotateY()：這個屬性相信大家都知道，這也是這次動效能實現(xiàn)的關(guān)鍵。rotateX 控制卡片繞水平軸轉(zhuǎn)動，rotateY 控制卡片繞垂直軸轉(zhuǎn)動。

總結(jié)一下

如果把 CSS 3D 比作一場電影：

• perspective 是攝影機，決定了畫面的縱深感。
• transform-style: preserve-3d 是舞臺搭建，決定了演員（元素）能不能在臺前幕后來回走動，而不是畫在背景板上。
• transform: rotate / translate 是演員的動作，決定了物體怎么擺放和移動。

效果展示

如果你已經(jīng)理解了上面屬性，相信實現(xiàn)效果只是時間的問題，下面我就提前劇透一下效果吧！同時在瀏覽器中為你演示各個的屬性的具體效果，讓你更加深刻的理解上面的屬性。

試想一下，如果沒有設(shè)置 perspective 屬性會怎么樣呢？

為了更好的演示，我會將卡片繞著它的y軸固定旋轉(zhuǎn)30度。然后對比設(shè)置了 perspective 屬性和沒有設(shè)置 perspective 的效果如下。

在對比了設(shè)置 perspective 的作用后，接下來為你演示 transform-style: preserve-3d 的效果，為了更好的演示，接下來調(diào)整一下卡片在y軸的旋轉(zhuǎn)角度為-80度，同時對子元素設(shè)置 transform: translateZ(50px); 將背景調(diào)整為白色，讓文字和背景不會重合。對比效果如下：

從上面的效果可以看出，設(shè)置了 transform-style: preserve-3d 的文字和背景卡片是分離的，沒有設(shè)置 transform-style: preserve-3d 的文字被拍扁在卡片上面。

注意事項: 當(dāng)容器設(shè)置了 transform-style: preserve-3d; 的時候，不能再設(shè)置 overflow: hidden; 不然 transform-style: preserve-3d; 不會生效。

經(jīng)過上面的對比可以幫助我們更好的理解每個屬性在具體場景中的使用，下面就使用 vue3 去實現(xiàn)具體的功能。

代碼拆解

完整代碼

<template>
  <div class="container">
    <div 
      class="card"
      ref="cardRef"
      :style="cardStyle"
      @mousemove="handleMouseMove"
      @mouseleave="handleMouseLeave"
    >
      <div class="content">
        <span>ANIMATION</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

const cardRef = ref(null);

// 存儲旋轉(zhuǎn)角度
const transform = reactive({
  rotateX: 0,
  rotateY: 0
});

// 計算最終的 CSS 樣式
const cardStyle = computed(() => {
  const scale = 1;
  return {
    transform: `rotateX(${transform.rotateX}deg) rotateY(${transform.rotateY}deg)`,
    transition: 'transform 0.5s ease-out'
  };
});

const handleMouseMove = (e) => {
  if (!cardRef.value) return;

  const rect = cardRef.value.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  
  // 計算鼠標(biāo)距離中心點的偏移量 (-1 到 1)
  const percentX = (e.clientX - centerX) / (rect.width / 2);
  const percentY = (e.clientY - centerY) / (rect.height / 2);

  const deg = 25; // 最大旋轉(zhuǎn)角度
  transform.rotateY = percentX * deg;
  transform.rotateX = -percentY * deg; // 取反是因為鼠標(biāo)向上移動時圖片應(yīng)向下傾斜
};

const handleMouseLeave = () => {
  transform.rotateX = 0;
  transform.rotateY = 0;
};
</script>

<style scoped>
.container {
  /* 3D 透視的關(guān)鍵 */
  perspective: 1000px; 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #0f0f0f;
}

.card {
  position: relative;
  width: 320px;
  height: 200px;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  border-radius: 20px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* overflow: hidden; */
}

.content {
  font-family: 'Arial Black', sans-serif;
  font-size: 2.5rem;
  color: #000;
  /* 讓文字在 3D 空間懸浮 */
  transform: translateZ(50px); 
  pointer-events: none;
}
</style>

簡要分析:

1. 綁定事件：鼠標(biāo)移入卡片觸發(fā) mousemove 事件，設(shè)置卡片旋轉(zhuǎn)。鼠標(biāo)移除觸發(fā) mouseleave 事件將旋轉(zhuǎn)的角度置為0。
2. 樣式動態(tài)計算：動態(tài)綁定 style，通過計算屬性實時更新旋轉(zhuǎn)的角度。
3. 計算偏移量： 這里主要利用鼠標(biāo)當(dāng)前的位置減去卡片中心點計算出偏移距離，然后再除以卡片寬高的一半，等到一個-1到1的偏移值。
4. 角度映射：通過得到的偏移值乘以 deg (25度)，剛好可以映射到對應(yīng)的角度，比如鼠標(biāo)移動到最左邊，卡片正好偏轉(zhuǎn) -25度。

優(yōu)化補充

下面是一些優(yōu)化的建議，有興趣的同學(xué)可以自己實現(xiàn)一下：

1. 增加光影變化，跟隨鼠標(biāo)移動的卡片增加漸變層的光影，讓整體更加真實。
2. mousemove 在移動端不支持，增加移動端的支持。

總結(jié) 

到此這篇關(guān)于vue3實現(xiàn)鼠標(biāo)跟隨傾斜動態(tài)效果實例的文章就介紹到這了,更多相關(guān)vue3鼠標(biāo)跟隨傾斜內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論