3Dオブジェクト操作
CSS 3D transformで立方体をドラッグ回転。慣性付き。矢印キーでも回せる。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- パッケージ・製品を全方位から見せる
- 3Dモデル無しで立体感を出す演出
- ドラッグで触れる遊びのある見本
- 避ける場面
- 面の内容を読ませる用途（回さないと見えない）
- ドラッグとページスクロールが競合する縦長ページ
- reduce 設定で慣性を止めたい場面
- 構成要素
- ステージ
- 立方体
- 6つの面
- 面のラベル
- 操作ヒント
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab でステージに到達し ←→↑↓ で 15° ずつ回転・Home で初期の向きへ戻す。ドラッグで回転し離すと慣性が付く
- 支援技術
ステージは role=group＋aria-label で操作方法を伝え、各面のラベルは通常テキストで読める。向きは視覚専用なので面の内容はテキストで完結。reduce で慣性なし
- 動き
ドラッグ量 ×0.55° で即時回転（transition 50ms）。離すと速度が 0.92/frame で減衰する慣性回転。reduce では慣性を付けない
デザインの要点
- 6面は translateZ(60px)＝一辺の半分で押し出し、親に preserve-3d と perspective 480px を置く。perspective が無いと平面が回る
- ドラッグ中は transition を切り、離した瞬間に戻す。切らないと 50ms 遅れて指に付いてこない
- 慣性は離す直前の速度を 0.92/frame で減衰させ 0.01° 未満で止める。減衰が弱いと回り続けて面が読めない
- 初期姿勢は rotateX(−20°) rotateY(30°) で3面を見せる。正面向きだと立方体だと分からない
コード（コピーして使えます）
<div class="scene-wrap">
<div class="stage" id="stage" role="group" tabindex="0" aria-label="立方体。ドラッグか矢印キーで回転、Home で戻す">
<div class="cube" id="cube">
<div class="face face-front">
<span class="label">FRONT</span>
<span class="sub">ちいつる</span>
</div>
<div class="face face-back">
<span class="label">BACK</span>
<span class="sub">chiisana.tools</span>
</div>
<div class="face face-left">
<span class="label">LEFT</span>
</div>
<div class="face face-right">
<span class="label">RIGHT</span>
</div>
<div class="face face-top">
<span class="label">TOP</span>
</div>
<div class="face face-bottom">
<span class="label">BOTTOM</span>
</div>
</div>
</div>
<p class="hint">ドラッグ / 矢印キーで回せます</p>
</div>