概要
カードが円環状に3D配置され、ゆっくり自動回転しながらドラッグでも回せる、ポートフォリオや実績紹介向けのリッチなギャラリー。
使用技術
・GSAP + Draggable（ドラッグ操作）
・CSS 3D Transform（perspective / preserve-3d）
実装ポイント
・カード枚数から `radius = (幅/2) / tan(π/枚数)` で円環半径を算出し、各カードを `rotationY` と `transformOrigin` の奥行き指定でリング状に配置
・`gsap.ticker` で毎フレーム角度を減算し続けることで優雅な自動回転を実現
・Draggableは透明なプロキシ要素を `type:”x”` でドラッグさせ、`deltaX` を回転量に変換する定番パターン。ドラッグ中は自動回転を止め、`delayedCall` で1.5秒後に再開
・中心からの角度差を `gsap.utils.mapRange` で opacity / blur / scale / y にマッピングし、奥のカードほど暗くぼかして遠近感を強調
・CSSの `-webkit-box-reflect` で床への映り込み、`translateZ` でテキストを手前に浮かせる演出
コアスニペット
const angleStep = 360 / cardCount;
// Radius calculation with extra room for the reflection
const radius = Math.round((320 / 2) / Math.tan(Math.PI / cardCount)) + 200;
wrappers.forEach((wrapper, index) => {
const angle = index * angleStep;
gsap.set(wrapper, {
rotationY: angle,
z: radius,
transformOrigin: `50% 50% ${-radius}px`
});
});