{"id":51445139,"url":"https://github.com/torifo/animation-card-rotate","last_synced_at":"2026-07-05T15:30:40.335Z","repository":{"id":364705953,"uuid":"1251004417","full_name":"torifo/animation-card-rotate","owner":"torifo","description":"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.","archived":false,"fork":false,"pushed_at":"2026-06-14T05:09:19.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-14T07:09:29.327Z","etag":null,"topics":["animation","card-rotate","css","css-3d","css-animation","design-study","github-pages","html","javascript","web-design"],"latest_commit_sha":null,"homepage":"https://torifo.github.io/animation-card-rotate/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/torifo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-27T06:47:27.000Z","updated_at":"2026-06-14T05:09:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/torifo/animation-card-rotate","commit_stats":null,"previous_names":["torifo/animation-card-rotate"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/torifo/animation-card-rotate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-card-rotate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-card-rotate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-card-rotate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-card-rotate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torifo","download_url":"https://codeload.github.com/torifo/animation-card-rotate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torifo%2Fanimation-card-rotate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35160046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","card-rotate","css","css-3d","css-animation","design-study","github-pages","html","javascript","web-design"],"created_at":"2026-07-05T15:30:40.110Z","updated_at":"2026-07-05T15:30:40.309Z","avatar_url":"https://github.com/torifo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# D·Lo · 3D カード回転ヒーロー\n\n\u003e ロード時にカードの扇が 3D で組み上がり、放置中はゆっくり回頭。カーソルで向きが追従し、ドラッグすれば慣性付きで自由に回せるヒーロー。perspective と transform だけで、WebGL なし。\n\n**Live demo**: `./index.html`\n\n## 概要\n\n| 項目 | 内容 |\n|---|---|\n| ジャンル | D · 3D・空間 |\n| 用途 | Lo · ローディング / ヒーロー |\n| 主な参考 | Apple, Vercel |\n| 依存 | なし（Pure HTML + CSS + Vanilla JS。JS は REPLAY のみ） |\n| 推奨配置 | ファーストビュー、プロダクト／機能のショーケース |\n\n\n## スキルとして導入 / Install as a skill\n\nこのリポジトリは Claude Code / Codex CLI 共通の **`SKILL.md`**（オープン標準）を同梱しており、AI エージェントのスキルとして使えます。リポジトリ自体をスキルディレクトリへリンクするだけです。\n\nThis 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.\n\n```bash\n# Claude Code\nln -s \"$(pwd)\" ~/.claude/skills/anim-card-rotate\n# Codex CLI\nln -s \"$(pwd)\" ~/.codex/skills/anim-card-rotate\n```\n\nエージェントを再起動すると `description` に基づき自動でマッチします（スキル名: `anim-card-rotate`）。\nRestart the agent; it is matched automatically by the skill's `description` (skill name: `anim-card-rotate`).\n\n## 仕組み\n\n`.slot`（3D の定位置）と `.card`（登場アニメ）で transform を**親子に分離**して合成する。\n\n| 要素 | 担当 transform |\n|---|---|\n| `.deck` | 回転（JS が `rotateY`/`rotateX` を毎フレーム駆動） |\n| `.slot` | 各カードの定位置（`translateX` / `translateZ` / `rotateY`） |\n| `.card` | 登場（`opacity` + `translateY` + `rotateX`、load 時 1 回・CSS） |\n\n1. `.scene` に `perspective`、`.deck` に `transform-style: preserve-3d`\n2. `.slot--1/2/3` が左・中央・右の 3D 定位置。**左右は `translateZ(-30px)` で後退、中央は `translateZ(60px)` で前進**させ、実 Z で前後を確定（回転カードが中央を貫通するのを防ぐ）\n3. `.card` がロード時に下から起き上がって組み上がる（CSS、`animation-delay` で staggered）\n4. 登場後は JS の 1 ループが `.deck` の回転を統合制御\n\n### 回転の 3 モード（JS で合成）\n\n| モード | 条件 | 動き |\n|---|---|---|\n| idle | 放置（非操作・慣性ほぼ 0） | `rotateY` をゆっくり往復（重み `idleW` をフェード） |\n| follow | カーソルが `.scene` 内 | カーソル位置へ `rotateY`/`rotateX` が傾く |\n| spin | ドラッグ中 / 離した直後 | `spin += dx`、離すと `vel*=0.93` の慣性で減衰 |\n\n最終 `rotateY = spin + follow + idle`。登場（`.card`）と回転（`.deck`）が別要素なので干渉しない。横ドラッグはスマホでも有効（`.scene` に `touch-action:pan-y`）。\n\n## 組み込み手順\n\n### 1. 2 ファイルをコピー\n\n`style.css` / `script.js` を移植先へ。JS は REPLAY ボタン用のみ（不要なら省略可、登場・回頭は CSS だけで動く）。\n\n### 2. マークアップ\n\n```html\n\u003csection class=\"hero\" data-card-rotate\u003e\n  \u003cdiv class=\"hero-text\"\u003e…見出し・本文・\u003cbutton data-replay\u003eREPLAY\u003c/button\u003e…\u003c/div\u003e\n  \u003cdiv class=\"scene\"\u003e\n    \u003cdiv class=\"deck\"\u003e\n      \u003cdiv class=\"slot slot--1\"\u003e\u003cdiv class=\"card card--a\"\u003e…\u003c/div\u003e\u003c/div\u003e\n      \u003cdiv class=\"slot slot--2\"\u003e\u003cdiv class=\"card card--b\"\u003e…\u003c/div\u003e\u003c/div\u003e\n      \u003cdiv class=\"slot slot--3\"\u003e\u003cdiv class=\"card card--c\"\u003e…\u003c/div\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n\u003cscript src=\"./card-rotate.js\"\u003e\u003c/script\u003e\n```\n\n- カードは 3 枚想定。増やす場合は `.slot--n` を足し、`translateX` / `rotateY` / `animation-delay` を割り当てる\n- カードの中身・配色は自由（デモは `.card--a/b/c` でグラデーション）\n\n## カスタマイズ可能な CSS 変数\n\n| 変数 | 役割 | デフォルト |\n|---|---|---|\n| `--cr-perspective` | 遠近の強さ（小さいほど誇張） | `1400px` |\n| `--cr-spread` | 左右カードの開き（`translateX`） | `52%` |\n| `--cr-turn` | 左右カードの回頭角（`rotateY`） | `26deg` |\n| `--cr-in` | 登場 1 枚の時間 | `900ms` |\n\n\u003e idle / follow / spin の強さ・感度は `script.js` 冒頭の `MAX_YAW` / `MAX_PITCH` / `DRAG_K` で調整。\n\u003e 合成 `rotateY` は `ROT_LIMIT`（既定 52°）でクランプし、左右カードのオフセット（`--cr-turn` ≈26°）を足しても 90° 未満＝**カード裏面が見えない**ようにしている（保険で `.card{backface-visibility:hidden}` も指定）。`--cr-turn` を上げたら `ROT_LIMIT` を下げて合わせる。\n\n### よくある調整例\n\n```css\n/* 開きを大きく・誇張を強く */\n.hero{ --cr-spread:64%; --cr-turn:34deg; --cr-perspective:1000px; }\n\n/* 回頭を止めて静的なヒーローに */\n.deck{ animation:none; }\n```\n\n## アクセシビリティ\n\n`prefers-reduced-motion: reduce` のとき、登場・回頭・REPLAY のドット点滅を止め、カードを定位置で静止表示する。\n\n## 制約 / 既知の挙動\n\n- `.slot` の `rotateY` で側面カードは斜めになる。中身の可読性が要る場合は `--cr-turn` を控えめに\n- `box-shadow` を 3D 変形した要素に掛けているため、枚数が多いと描画負荷が上がる\n- REPLAY は `.card` のアニメを消す → reflow → 再付与で再生する（`is-replay` クラス）\n\n## ライセンス\n\nANIMATION DESIGN STUDY の一部として公開（コピペ自由）。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-card-rotate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorifo%2Fanimation-card-rotate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorifo%2Fanimation-card-rotate/lists"}