3Dレコードカルーセルと波紋エフェクトのUI

Motion / Interaction

実装ポイント Focus: レコードジャケット風の画像が3D空間を滑らかに回転するUIを実装しました。
アイテムにマウスを合わせると全体の回転が一時停止し、対象のジャケットが少し手前に浮かび上がり背後から音楽が鳴り出しているかのようなグラデーションの波紋（波動）が広がります。
JavaScriptによる複雑な座標計算（サイン・コサインなど）に頼らず、HTML側に持たせたカスタムプロパティと、CSSの3D変形プロパティ（perspective, rotateY, translateZ）のみで円柱状の配置を構築することで、
軽量でストレスフリーなアニメーションを実現しました。
挑戦 Challenge: ホバー時に広がる波紋エフェクトにおいて、「背景が透明なグラデーション枠線」を描画し美しく発光させる表現に注力しました。
通常のborderプロパティではグラデーションのアニメーション制御が難しいため、要素全体をグラデーションで塗りつぶし、maskプロパティ（mask-composite）を用いて内側をくり抜くことで実装しています。
また、くり抜いた特殊な形状に対しては通常のbox-shadowでは不自然な四角い影が出てしまうため、filter: drop-shadowを採用し、枠線の形に沿って柔らかく光を放つグロウ効果を両立させました。
使用技術 Animation: ・HTML5 / SCSS
・CSS 3D Transforms (preserve-3d)
・CSS Masking & Filters
詳細 Details: #css-only #Hover Interaction

他の研究記録も見る

数学的フラップ構造のシャッター演出と、3Dカードフリップ

ドローン視点で辿る、ハイキングの追体験アニメーション

和風お品書きの多言語対応UI