實現(xiàn)3D Hover效果主要依靠CSS 3D變換和透視效果，結(jié)合JavaScript可以實現(xiàn)更動態(tài)的交互。以下是幾種常見的實現(xiàn)方案和代碼示例：
---
### 一、基礎(chǔ)3D變換（純CSS實現(xiàn)）
```html
<div class="card">
? <div class="card-front">Front</div>
? <div class="card-back">Back</div>
</div>
```
```css
.card {
? width: 200px;
? height: 300px;
? position: relative;
? transform-style: preserve-3d; /* 關(guān)鍵：保持3D空間 */
? transition: transform 0.6s;
? perspective: 1000px; /* 透視效果 */
}
.card-front, .card-back {
? position: absolute;
? width: 100%;
? height: 100%;
? backface-visibility: hidden; /* 隱藏背面 */
}
.card-front {
? background: #3498db;
}
.card-back {
? background: #e74c3c;
? transform: rotateY(180deg); /* 初始背面朝后 */
}
.card:hover {
? transform: rotateY(180deg); /* 懸停翻轉(zhuǎn) */
}
```
---
### 二、跟隨鼠標(biāo)的3D傾斜效果（CSS + JavaScript）
```html
<div class="hover-box">Hover Me</div>
```
```css
.hover-box {
? width: 200px;
? height: 200px;
? background: #2ecc71;
? transition: transform 0.3s;
? transform-style: preserve-3d;
}
```
```javascript
const box = document.querySelector('.hover-box');
box.addEventListener('mousemove', (e) => {
? const { offsetX: x, offsetY: y } = e;
? const rotateY = (x - 100) / 10; // 根據(jù)鼠標(biāo)位置計算旋轉(zhuǎn)角度
? const rotateX = (y - 100) / 10;
? box.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
box.addEventListener('mouseleave', () => {
? box.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
});
```
---
### 三、立體懸浮陰影效果
```html
<div class="floating-card">
? <div class="content">3D Effect</div>
</div>
```
```css
.floating-card {
? width: 300px;
? height: 400px;
? position: relative;
? transition: transform 0.4s, box-shadow 0.4s;
? transform-style: preserve-3d;
}
.floating-card:hover {
? transform: translateZ(20px); /* Z軸位移 */
? box-shadow: 0 20px 40px rgba(0,0,0,0.3); /* 增強立體陰影 */
}
```
---
### 四、圖片3D懸停效果
```html
<div class="photo-container">
? <img src="your-image.jpg" class="photo">
</div>
```
```css
.photo-container {
? perspective: 1000px;
}
.photo {
? width: 300px;
? transition: transform 0.5s;
? transform-style: preserve-3d;
}
.photo:hover {
? transform:
? ? rotateX(5deg)
? ? rotateY(5deg)
? ? translateZ(20px)
? ? scale(1.05);
}
```
---
### 五、優(yōu)化技巧
1. **性能優(yōu)化**：
? - 使用 `will-change: transform` 提前聲明變化屬性
? - 避免過度使用高精度透視（`perspective`值不宜過大）
? - 使用 `transform: translateZ(0)` 觸發(fā)硬件加速
2. **瀏覽器兼容性**：
? ```css
? transform: rotateY(180deg);
? -webkit-transform: rotateY(180deg); /* 舊版瀏覽器支持 */
? ```
3. **組合動畫**：
? 結(jié)合 `@keyframes` 實現(xiàn)更復(fù)雜的復(fù)合動畫：
? ```css
? @keyframes float {
? ? 0% { transform: translateZ(0); }
? ? 50% { transform: translateZ(30px); }
? ? 100% { transform: translateZ(0); }
? }
? ```
通過以上方法，可以實現(xiàn)從簡單到復(fù)雜的3D懸停效果，建議根據(jù)具體需求選擇合適的技術(shù)方案。
