DESIGN STUDY · ANIMATION
奥行きで
奥行きで
掴む第一印象。
ロード時にカードの扇が 3D で組み上がり、放置中はゆっくり回頭。カーソルを乗せると向きが追従し、ドラッグすれば慣性付きで自由に回せる。perspective と transform だけ、WebGL なし。
01MOTION
◐
02DESIGN
✳
03CODE
⌘
使い方
— USAGE
01
2 ファイルをコピー
style.css / script.js を移植先へ。回転・組み上げは CSS、JS は REPLAY だけ。外部依存ゼロ。
02
入れ子で transform 分離
.slot が 3D の定位置（rotateY / translateX）、内側の .card が組み上げの登場（opacity / translateY / rotateX）。親子で transform を分離して合成。
03
idle / 追従 / 回す
登場後は JS の 1 ループで回転を統合制御。放置＝ゆっくり往復、カーソル＝向きが追従、ドラッグ＝慣性付きで自由回転。スマホは横ドラッグで回せる。
カスタマイズ可能な CSS 変数
--cr-perspective遠近の強さ1400px--cr-spread左右カードの開き（translateX）52%--cr-turn左右カードの回頭角（rotateY）26deg--cr-in登場 1 枚の時間900ms