Spin a 3D gallery滑動立體畫廊

Drag the cards left or right and try flat, deep and tilted views左右拖動卡片，試試平面、立體與傾斜三種視角

01 / 06

Superposition

Reduced motion is on — use buttons or arrow keys to change slides

Advanced settings & export

Σ sin(ωx + φ)

Perspective 950pxCard spacing 0.91×Side rotation 12°Depth distance 95pxDepth scale 0.12Velocity blur 2px

Export the current appearance and renderer for your own gesture or animation state. Mobile preview limits blur.

Carousel renderer

// 3D 輪播設定與繪製函式，position 使用無界連續座標，velocity 單位為張／秒
export const options = {
  "perspective": 950,
  "spacing": 0.91,
  "tilt": 12,
  "depth": 95,
  "scale": 0.12,
  "blur": 2
};

// 容器需 position:relative; overflow:hidden; perspective:950px
// 容器自行設定 --card-width（例如 280px），並把相同像素寬度傳入 cardWidth
// 圖片需 position:absolute; width:var(--card-width); left:calc(50% - var(--card-width)/2); aspect-ratio:4/5
export function renderCarousel(cards, position, velocity, cardWidth, reducedMotion = false) {
  const count = cards.length;
  if (!count) return;
  cards[0].parentElement.style.perspective = options.perspective + 'px';
  cards.forEach((card, index) => {
    const distance = (((index - position + count / 2) % count) + count) % count - count / 2;
    const depth = Math.min(2, Math.abs(distance));
    const scale = reducedMotion ? 1 : 1 - depth * options.scale;
    const tilt = reducedMotion ? 0 : Math.max(-35, Math.min(35, distance * -options.tilt - velocity * 0.45));
    card.style.transform = 'translate3d(' + distance * cardWidth * options.spacing + 'px,' + depth * (reducedMotion ? 0 : 16) + 'px,' + -depth * options.depth + 'px) rotateY(' + tilt + 'deg) scale(' + scale + ')';
    card.style.opacity = Math.max(0, 1 - Math.max(0, depth - 0.8) * 0.67);
    card.style.filter = reducedMotion ? 'none' : 'blur(' + Math.min(options.blur, Math.abs(velocity) * depth * 0.13) + 'px)';
    card.style.zIndex = 10 - Math.round(depth * 3);
  });
}

// 將拖曳位置或動畫位置傳入 renderCarousel，圖片、按鈕與手勢處理由你的元件提供
// 減少動態模式：matchMedia('(prefers-reduced-motion: reduce)').matches

Source updates as you change the controls

Enable JavaScript to play. You can still read how it works below.啟用 JavaScript 即可操作實驗，下方的製作說明仍可直接閱讀

How it works看看怎麼做的

3D carousel tuner3D 輪播調校器

Perspective
Analytic spring
Renderer export

Continuous coordinates without seams連續座標消除接縫

Position stays unbounded while rendering maps periodic shortest distances. The last-to-first transition keeps the same velocity and spring rules.位置保留無界連續座標，畫面以週期最短距離映射，最後一張接回第一張時，仍使用相同的速度與彈簧規則

Depth as adjustable parameters把景深拆成可調參數

Tune perspective distance, spacing, tilt, Z depth, scale and velocity blur independently. Drag, touch and keyboard navigation share one state.透視距離、卡片間距、傾斜、Z 軸深度、縮放與速度模糊分開調整，拖曳、觸控和鍵盤共用同一套狀態

Export the visual renderer匯出視覺渲染邏輯

Export the current parameters and JavaScript renderer for transform, opacity and filter. Connect your own position and velocity state; the snippet does not include a complete drag engine.匯出目前參數與計算 transform、opacity、filter 的 JavaScript 渲染程式，專案可將自己的位置與速度狀態接入，匯出內容不含完整拖曳引擎