https://github.com/torifo/animation-card-rotate
Animation study — 3D card-rotate hero. Card fan assembles in 3D on load; idle sway + cursor-follow + drag-to-spin (clamped so no back faces). Pure CSS 3D, no WebGL.
https://github.com/torifo/animation-card-rotate
animation card-rotate css css-3d css-animation design-study github-pages html javascript web-design
Last synced: about 1 month ago
JSON representation
Animation study — 3D card-rotate hero. Card fan assembles in 3D on load; idle sway + cursor-follow + drag-to-spin (clamped so no back faces). Pure CSS 3D, no WebGL.
- Host: GitHub
- URL: https://github.com/torifo/animation-card-rotate
- Owner: torifo
- Created: 2026-05-27T06:47:27.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-06-14T05:09:19.000Z (about 2 months ago)
- Last Synced: 2026-06-14T07:09:29.327Z (about 2 months ago)
- Topics: animation, card-rotate, css, css-3d, css-animation, design-study, github-pages, html, javascript, web-design
- Language: CSS
- Homepage: https://torifo.github.io/animation-card-rotate/
- Size: 11.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# D·Lo · 3D カード回転ヒーロー
> ロード時にカードの扇が 3D で組み上がり、放置中はゆっくり回頭。カーソルで向きが追従し、ドラッグすれば慣性付きで自由に回せるヒーロー。perspective と transform だけで、WebGL なし。
**Live demo**: `./index.html`
## 概要
| 項目 | 内容 |
|---|---|
| ジャンル | D · 3D・空間 |
| 用途 | Lo · ローディング / ヒーロー |
| 主な参考 | Apple, Vercel |
| 依存 | なし（Pure HTML + CSS + Vanilla JS。JS は REPLAY のみ） |
| 推奨配置 | ファーストビュー、プロダクト／機能のショーケース |
## スキルとして導入 / Install as a skill
このリポジトリは Claude Code / Codex CLI 共通の **`SKILL.md`**（オープン標準）を同梱しており、AI エージェントのスキルとして使えます。リポジトリ自体をスキルディレクトリへリンクするだけです。
This repo ships a cross-agent **`SKILL.md`** (open standard) usable by both Claude Code and Codex CLI. Just link the repo into the agent's skills directory.
```bash
# Claude Code
ln -s "$(pwd)" ~/.claude/skills/anim-card-rotate
# Codex CLI
ln -s "$(pwd)" ~/.codex/skills/anim-card-rotate
```
エージェントを再起動すると `description` に基づき自動でマッチします（スキル名: `anim-card-rotate`）。
Restart the agent; it is matched automatically by the skill's `description` (skill name: `anim-card-rotate`).
## 仕組み
`.slot`（3D の定位置）と `.card`（登場アニメ）で transform を**親子に分離**して合成する。
| 要素 | 担当 transform |
|---|---|
| `.deck` | 回転（JS が `rotateY`/`rotateX` を毎フレーム駆動） |
| `.slot` | 各カードの定位置（`translateX` / `translateZ` / `rotateY`） |
| `.card` | 登場（`opacity` + `translateY` + `rotateX`、load 時 1 回・CSS） |
1. `.scene` に `perspective`、`.deck` に `transform-style: preserve-3d`
2. `.slot--1/2/3` が左・中央・右の 3D 定位置。**左右は `translateZ(-30px)` で後退、中央は `translateZ(60px)` で前進**させ、実 Z で前後を確定（回転カードが中央を貫通するのを防ぐ）
3. `.card` がロード時に下から起き上がって組み上がる（CSS、`animation-delay` で staggered）
4. 登場後は JS の 1 ループが `.deck` の回転を統合制御
### 回転の 3 モード（JS で合成）
| モード | 条件 | 動き |
|---|---|---|
| idle | 放置（非操作・慣性ほぼ 0） | `rotateY` をゆっくり往復（重み `idleW` をフェード） |
| follow | カーソルが `.scene` 内 | カーソル位置へ `rotateY`/`rotateX` が傾く |
| spin | ドラッグ中 / 離した直後 | `spin += dx`、離すと `vel*=0.93` の慣性で減衰 |
最終 `rotateY = spin + follow + idle`。登場（`.card`）と回転（`.deck`）が別要素なので干渉しない。横ドラッグはスマホでも有効（`.scene` に `touch-action:pan-y`）。
## 組み込み手順
### 1. 2 ファイルをコピー
`style.css` / `script.js` を移植先へ。JS は REPLAY ボタン用のみ（不要なら省略可、登場・回頭は CSS だけで動く）。
### 2. マークアップ
```html
…見出し・本文・REPLAY…
…
…
…
```
- カードは 3 枚想定。増やす場合は `.slot--n` を足し、`translateX` / `rotateY` / `animation-delay` を割り当てる
- カードの中身・配色は自由（デモは `.card--a/b/c` でグラデーション）
## カスタマイズ可能な CSS 変数
| 変数 | 役割 | デフォルト |
|---|---|---|
| `--cr-perspective` | 遠近の強さ（小さいほど誇張） | `1400px` |
| `--cr-spread` | 左右カードの開き（`translateX`） | `52%` |
| `--cr-turn` | 左右カードの回頭角（`rotateY`） | `26deg` |
| `--cr-in` | 登場 1 枚の時間 | `900ms` |
> idle / follow / spin の強さ・感度は `script.js` 冒頭の `MAX_YAW` / `MAX_PITCH` / `DRAG_K` で調整。
> 合成 `rotateY` は `ROT_LIMIT`（既定 52°）でクランプし、左右カードのオフセット（`--cr-turn` ≈26°）を足しても 90° 未満＝**カード裏面が見えない**ようにしている（保険で `.card{backface-visibility:hidden}` も指定）。`--cr-turn` を上げたら `ROT_LIMIT` を下げて合わせる。
### よくある調整例
```css
/* 開きを大きく・誇張を強く */
.hero{ --cr-spread:64%; --cr-turn:34deg; --cr-perspective:1000px; }
/* 回頭を止めて静的なヒーローに */
.deck{ animation:none; }
```
## アクセシビリティ
`prefers-reduced-motion: reduce` のとき、登場・回頭・REPLAY のドット点滅を止め、カードを定位置で静止表示する。
## 制約 / 既知の挙動
- `.slot` の `rotateY` で側面カードは斜めになる。中身の可読性が要る場合は `--cr-turn` を控えめに
- `box-shadow` を 3D 変形した要素に掛けているため、枚数が多いと描画負荷が上がる
- REPLAY は `.card` のアニメを消す → reflow → 再付与で再生する（`is-replay` クラス）
## ライセンス
ANIMATION DESIGN STUDY の一部として公開（コピペ自由）。