Shopline 3D 產品展示效果 — CSS perspective 實戰

Shopline 係香港最知名嘅電商平台之一，幫助唔少品牌建立網店。佢哋官網有個好型嘅 3D 產品展示效果——產品圖片或者 mockup 會微微傾斜，呈現出立體感，當你移動滑鼠嗰陣仲會跟住郁，成個感覺好有科技感同高級感。今篇文就同大家拆解呢個效果點做，由基本 3D 傾斜到 mouse parallax 跟隨效果都會覆蓋。

Shopline 網站風格概覽

Shopline 係香港土生土長嘅 SaaS 電商平台，2013 年成立，至今已經服務超過 50 萬個品牌。佢哋官網走專業科技風格，強調「輕鬆開網店」嘅理念。其中一個最吸睛嘅設計元素就係 3D 產品展示——用 CSS 3D transforms 令平面截圖變得有立體感，大大增強視覺衝擊力，令潛在客戶一眼就被吸引。

3D 效果核心原理

CSS 3D transforms 其實係靠三個要素配合：

1. `perspective` — 透視距離

`perspective` 決定咗「相機」離個元素有幾遠。數值越大，3D 效果越淡；數值越小，效果越誇張。一般網站用 `1000px` 到 `1500px` 最自然。

2. `transform-style: preserve-3d` — 保留 3D 空間

呢個屬性確保子元素都處於同一個 3D 空間入面，而唔係被壓扁做 2D。

3. `rotateX()` / `rotateY()` — 旋轉角度

控制元素圍繞 X 軸（上下傾斜）同 Y 軸（左右傾斜）旋轉。Shopline 通常用 `-5deg` 到 `5deg` 嘅微調角度，營造自然嘅立體感。

基本 3D 傾斜效果

最簡單嘅版本，純 CSS 實現：

/* ===== 3D 展示容器 ===== */n.showcase-3d {n  perspective: 1000px;n  perspective-origin: center center;n  display: flex;n  justify-content: center;n  align-items: center;n  min-height: 600px;n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);n  padding: 40px;n}nn/* ===== 3D 產品卡片 ===== */n.product-card-3d {n  width: 500px;n  transform-style: preserve-3d;n  transform: rotateY(-5deg) rotateX(5deg);n  transition: transform 0.6s ease;n  border-radius: 16px;n  box-shadow: n    20px 20px 60px rgba(0, 0, 0, 0.3),n    -5px -5px 20px rgba(255, 255, 255, 0.1);n}nn/* 滑鼠 hover 時輕微修正角度 */n.product-card-3d:hover {n  transform: rotateY(-2deg) rotateX(2deg) scale(1.02);n}nn/* ===== 產品圖 ===== */n.product-card-3d img {n  width: 100%;n  border-radius: 16px;n  display: block;n}

<!-- HTML 結構 -->n<div class="showcase-3d">n  <div class="product-card-3d">n    <img n      src="shopline-dashboard-mockup.png" n      alt="Shopline 後台介面展示"n    />n  </div>n</div>

代碼逐行解釋

`perspective: 1000px`

設定透視距離為 1000 像素。你可以想像成相機離張相 1 米遠，呢個距離令 3D 效果自然唔誇張。如果改成 `500px`，效果會更強烈；改成 `2000px` 就會幾乎睇唔到 3D 感。

`perspective-origin: center center`

設定透視點喺容器中心。即係用戶「眼睛」正對住個元素中間。你可以改做 `top left` 或者 `bottom right` 創造唔同嘅視角效果。

`transform: rotateY(-5deg) rotateX(5deg)`

兩個旋轉配合埋，就做到 Shopline 嗰種「由左上方向右下方望」嘅立體感。

`transform-style: preserve-3d`

呢個好重要！如果唔加，子元素（例如張圖片）會被 flatten 做 2D，3D 效果就會消失。

`box-shadow` 雙層陰影

底層大範圍陰影模擬深度，上層微弱高光模擬反光，成個立體感即刻出晒嚟。

進階版：Mouse Parallax 跟隨效果

基本版已經好靚，但如果想做到 Shopline 官網嗰種「滑鼠移動，產品跟住郁」嘅互動效果，就要加少少 JavaScript：

/* ===== 3D Parallax 容器 ===== */n.showcase-parallax {n  perspective: 1000px;n  display: flex;n  justify-content: center;n  align-items: center;n  min-height: 700px;n  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);n  padding: 40px;n  overflow: hidden;n}nn/* ===== 3D 產品卡片（Parallax 版） ===== */n.product-parallax {n  width: 550px;n  transform-style: preserve-3d;n  transition: transform 0.15s ease-out;n  border-radius: 20px;n  box-shadow: n    25px 25px 80px rgba(0, 0, 0, 0.4),n    inset 0 0 0 1px rgba(255, 255, 255, 0.1);n  will-change: transform;n}nn.product-parallax img {n  width: 100%;n  border-radius: 20px;n  display: block;n}

// ===== Mouse Parallax 效果 =====nconst showcase = document.querySelector('.showcase-parallax');nconst product = document.querySelector('.product-parallax');nnshowcase.addEventListener('mousemove', (e) => {n  // 計算滑鼠喺容器中間嘅相對位置（-1 到 1）n  const rect = showcase.getBoundingClientRect();n  const x = (e.clientX - rect.left) / rect.width;  // 0 ~ 1n  const y = (e.clientY - rect.top) / rect.height;   // 0 ~ 1n  n  // 轉換做 -1 到 1 嘅範圍n  const centerX = (x - 0.5) * 2;n  const centerY = (y - 0.5) * 2;n  n  // 計算旋轉角度（最大 ±15 度）n  const rotateY = centerX * 15;   // 左右移動控制 Y 軸旋轉n  const rotateX = -centerY * 15;  // 上下移動控制 X 軸旋轉（負號反轉方向）n  n  // 應用變換n  product.style.transform = `n    rotateY(${rotateY}deg) n    rotateX(${rotateX}deg)n  `;n});nn// 滑鼠離開時歸位nshowcase.addEventListener('mouseleave', () => {n  product.style.transform = 'rotateY(0deg) rotateX(0deg)';n});

Parallax 代碼解釋

計算相對位置

x = (滑鼠 X 座標 - 容器左邊) / 容器寬度

呢個公式將滑鼠位置轉換做 0 到 1 之間嘅值。再用 `(x – 0.5) * 2` 轉換做 -1 到 1，方便後續計算。

角度映射

`centerX * 15` 嘅意思係：

你可以調整個 `15` 數值控制效果強度。

`transition: transform 0.15s ease-out`

用短促嘅 transition 令移動有少少慣性感，唔會太生硬。如果用 `0s` 會好機械化，用 `0.5s` 以上就會太lag。

`will-change: transform`

提示瀏覽器呢個元素會經常改變 transform，瀏覽器會預先做優化，令動畫更流暢。

多層 Parallax 效果

想效果更立體？可以做多層元素，每層移動速度唔同：

.product-layer {n  transform-style: preserve-3d;n  transition: transform 0.15s ease-out;n}nn.layer-back {n  transform: translateZ(-50px);n}nn.layer-front {n  transform: translateZ(50px);n}

// 多層移動，每層強度唔同nconst layers = document.querySelectorAll('.product-layer');nconst depths = [-30, 0, 30]; // 每層 Z 軸深度nnshowcase.addEventListener('mousemove', (e) => {n  const rect = showcase.getBoundingClientRect();n  const centerX = ((e.clientX - rect.left) / rect.width - 0.5) * 2;n  const centerY = ((e.clientY - rect.top) / rect.height - 0.5) * 2;n  n  layers.forEach((layer, index) => {n    const depth = depths[index] || 0;n    const intensity = 0.5 + (index * 0.3);n    n    layer.style.transform = `n      translateZ(${depth}px)n      rotateY(${centerX * 10 * intensity}deg)n      rotateX(${-centerY * 10 * intensity}deg)n    `;n  });n});

應用場景

呢個 3D 效果除咗 Shopline 產品展示之外，仲可以用喺好多地方：

小貼士

1. **角度唔好太大** — 建議維持喺 ±15 度之內，太大會令用戶眼花
2. **圖片要高清** — 3D 效果會令用戶更留意張圖，低解像度會好扣分
3. **加 `will-change`** — 動畫元素加 `will-change: transform` 可以提升效能
4. **手機版要關閉** — 手機冇 mousemove 事件，建議用 gyroscope 或者索性關閉 parallax
5. **唔好濫用** — 一頁放一個 3D 效果就夠，太多會令用戶頭暈

手機版處理

手機冇滑鼠，可以咁處理：

/* 手機版關閉 parallax，用靜態 3D */n@media (max-width: 768px) {n  .product-parallax {n    transform: rotateY(-3deg) rotateX(3deg) !important;n    /* !important 覆蓋 JS 動態設定 */n  }n}

或者如果你有時間，可以用 DeviceOrientation API 實現手機陀螺儀版本，手機傾斜時產品跟住郁——效果超級型！

結語

Shopline 嘅 3D 產品展示效果係 CSS 3D transforms 嘅絕佳示範。核心就係 `perspective` + `rotateX`/`rotateY` 呢個組合，配合埋 `preserve-3d` 保留立體空間。進階啲加埋 JavaScript mouse parallax，就可以做到互動性極強嘅效果。

呢個技巧學識咗之後，你可以喺任何產品頁、landing page 或者 portfolio 度用，絕對可以提升視覺質感。

如果你覺得有用，歡迎分享俾朋友！有任何問題都可以留言問我哋。

關於 TrendyOnly

TrendyOnly 專注於分析香港同亞洲地區最靚、最有特色嘅網站設計，從中拆解值得學習嘅 UI/UX 技巧，用淺白廣東話分享俾大家。無論你係設計師、開發者，定係純粹對網站設計有興趣，都歡迎 bookmark 我哋定時嚟睇新文章。

**分享出去：**
覺得呢篇文章幫到你？Share 俾你嘅設計師／開發者朋友，一齊學習進步！