ENTER
カメラが画面を貫いて次へ潜る 3D 遷移。→ / ← または下のドットで移動。
WORK
現在の画面は手前へ飛び抜けて消え、次の画面が奥から迫り上がってくる。
STUDIO
perspective と translateZ だけ。WebGL なし、ビルドなし、外部依存ゼロ。
CONTACT
戻る方向ではカメラが後退し、画面が奥へ引いていく。対称的な動き。
使い方
— USAGE
01
2 ファイルをコピー
本ディレクトリの style.css と script.js を移植先にコピー。外部依存ゼロ。
02
マークアップ
.camera[data-camera-deck] > .deck > .screen ×N を並べるだけ。`data-deck-prev/next/dots/count` を置けば自動で配線される。
03
操作
← / → キー、prev / next ボタン、ドットで移動。各 .screen の中身は自由。背景色はクラスで差し替え。
仕組み（3 状態）
activeカメラ正面。translateZ(0) · opacity 1表示中next奥に待機。translateZ(-depth) · opacity 0 → 迫ってくる未到達prev手前へ通過。translateZ(+pass) · opacity 0 → 飛び抜けた通過済カスタマイズ可能な CSS 変数
--cam-perspective遠近の強さ（小さいほど誇張）1200px--cam-depthnext 画面が待機する奥行き1500px--cam-passprev 画面が手前へ飛ぶ距離800px--cam-dur遷移時間900ms--cam-stageステージ（カメラ枠）の高さmin(80vh,680px)