— MOUNTAIN —
サービス紹介カードにそのまま使える実用版。カーソルの位置にカードが傾き、アイコンと文字が別々の高さで浮いています。
要素ごとに translateZ の距離を変えることで、傾けたときに視差が生まれ「厚み」を感じます。
カーソル位置を追いかける光の反射(グレア)で、ガラスや紙の質感を演出しています。
JavaScriptは傾き角度の計算だけ。描画はすべてCSSの3D変形なのでGPUで滑らかに動きます。
WebGLを使わなくても、CSSの transform-style: preserve-3d と perspective だけで本物の3D空間がつくれます。 8枚の写真を円周上に配置し、回転はドラッグの慣性つきです。
各カードを rotateY(45°刻み) + translateZ(半径) で円形配置。ドラッグ量を回転速度に変換し、離した後も慣性で滑らかに減速します。正面からの角度に応じて明るさも自動調整。
制作実績・商品ラインナップ・ポートフォリオのショーケースに。平面のカルーセルより「作品を手に取って眺める」感覚に近く、記憶に残りやすい見せ方です。
ライブラリ不使用・CSS 3D + ポインターイベントのみ。タッチドラッグ対応。カードの明るさは cos(正面との角度差) で計算しており、奥のカードほど自然に暗くなります。