1实现原理 · 为什么它能做到
投影先行：先在两套约定（true isometric 轴 ±30° / 2:1 dimetric 轴 ~26.57°）里选一套，之后绝不混用——轴系错了后面全错。
skills/isometric-animation/SKILL.md
Two conventions — pick one and never mix:
把「像不像 iso」压缩成一个几何选择，后续所有代码与检查项都挂在它上面。
用 CSS 3D 变换把任意平面推成 iso 地面：rotateX(60deg) rotateZ(45deg) 是标准 true-iso 组合，任何扁平 SVG/DOM（平面图、UI 稿、网格）放上去即成 iso 面，子元素用 translateZ 抬升。
skills/isometric-animation/SKILL.md
.iso-plane { transform: rotateX(60deg) rotateZ(45deg); }
这是它敢用「一个 div + 两个 rotate」替代 3D 引擎的原因：iso 本质是平面的仿射变形。
立体感靠每面独立着色：顶面最亮、左面中等、右面最暗，且全场光向固定——文中称之为让 iso 深度可信的最关键技巧。
skills/isometric-animation/SKILL.md
.block .top { background:#3a9bff; } /* lit */
SVG 版本同样用亮/中/暗三个多边形，规则可跨 CSS 与 SVG 平移。
场景由四种可复用构件搭出：堆叠 Z 层（卡片/楼层）、挤出块（面 + 着色）、iso 网格、爆炸视图（共享 --gap 变量统一开合）。
skills/isometric-animation/SKILL.md
Keep one shared `--gap` variable so the whole stack opens/closes together.
共享变量让「装配/爆炸」成为同一个数值的双向播放，而不是两套动画。
运动规则被写成禁令以维持 iso 可信度：抬升只能沿 Z（禁缩放假高度）、相机漂移必须小而慢、错峰必须按物理位置（自底向上）而非 DOM 顺序。
skills/isometric-animation/SKILL.md
**Lift along Z, never scale** to fake height — scaling breaks parallel projection.
这类「禁令式」条目是本文档的主要风格：把常见的假 depth 错误前置封堵。
需要真遮挡、真阴影或 3D 旋转时升级到 Three.js OrthographicCamera：等值 position 给出经典 30° 视角，正交相机保持远处不缩小；PerspectiveCamera 明确不是 iso。
skills/isometric-animation/SKILL.md
cam.position.set(10, 10, 10); // equal X,Y,Z → classic iso vantage
升级路径写明了判据（occlude / shadows / rotate in 3D），不是「想更强就用 Three.js」。
交付 = 单文件 HTML + 一条主时间轴 + ?t=N 冻结；验证要检的是投影本身（轴角是否对、Z 序与遮挡、有无 z-fighting、有无意外透视缩小），而不是「有没有动起来」。
skills/isometric-animation/SKILL.md
**INSPECT the projection, not just "did it animate":
把验收焦点从「动效存在」移到「几何正确」，与同 pack 的 diagram-animation 同源但检查项完全不同。
平行投影纪律贯穿全文：CSS 场景必须 perspective:none（或极大），Three.js 必须用正交相机——否则小 perspective 会被读成倾斜 3D 卡片而非 iso。
skills/isometric-animation/SKILL.md
Keep `perspective` OFF (or very large) — iso is parallel projection, so far objects must NOT shrink.
把「投影类型」提升为输出契约里的硬条件，而非风格偏好。
2核心能力
01两套投影约定（true iso ±30° / 2:1 dimetric ~26.57°）+ 网格↔屏幕坐标互转公式
02平面→iso 面（CSS 3D 变换，含 matrix3d 预乘等价写法；标签用反旋回正做 billboard）
03挤出块三面着色（CSS 与 SVG 两版；SVG 以绘制顺序代替深度缓冲解决遮挡与 z-fighting）
04堆叠 Z 层与自底向上 build（按 --z 物理顺序错峰，而非 DOM 顺序）
05爆炸视图：共享 --gap 变量统一开合（装配/爆炸是同一数值的双向播放）
06iso 网格：平面画线后交给 iso-plane 变形，再以 stroke-dashoffset 逐条画出
07相机漂移 / 指针视差 / hover 沿 Z 抬升（幅度小而慢，避免暴露平面本质）
08Three.js OrthographicCamera 真 3D iso 场景（单 progress 值驱动 build，可被 ?t 冻结用于确定性截图）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx / Playwright（无头截图） |
| cli | ffmpeg（contact-sheet.sh 拼图） |
| cli | npx -y playwright（仓库根 seek-shot.sh 内部） |
| network | jsDelivr CDN：three.js（reference 里钉的是 0.160 具体版本） |
| network | jsDelivr CDN：gsap ESM（未钉版本，走 +esm 浮动入口） |
| package | 第三方库/能力：Three.js、GSAP；CSS 3D 与内联 SVG 路线零依赖 |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: npx playwright screenshot --wait-for-timeout=500 …（SKILL.md Verify loop 内联命
- 网络端点: 声明外部网络访问: skill 自身无业务 API 调用；网络面来自工具链——npx 从 registry.npmjs.org 取 playwright 包并从 Play
- 本地工作目录: 文件读写与工件输出: frame-mid.png（SKILL.md 内联截图示例输出）、frame-<t>.png（seek-shot.sh 输出）
审计说明： 。判级对象是 skill 自身目录（skills/isometric-animation/：SKILL.md + references/ + 0 字节 README.md；目录内无脚本、无凭证、不写盘）。触发橙档的是它规定的复核回路与交付形态：① SKILL.md 的 Verify loop 直接内联 `npx playwright screenshot …`，所引用的仓库根 helper `scripts/seek-shot.sh` 内部是 `npx -y playwright screenshot`——npx 从 npm registry 取包并首次下载 Chromium 二进制，落入分级范式「依赖第三方插件、镜像、远程包」（同作者 pack 先例：logo-animation 同因判橙）；② 交付物在浏览器端从 cdn.jsdelivr.net 取 three.js（钉 0.160）与 gsap（浮动版本）——产物期引用，按批4 细则不计为执行期外发，仅列明。skill 本身不读凭证/env、不调业务 API、不采集、不绕过防护，故非红档。触发条件：只有真正跑复核回路（截图/拼图）时才发生远程拉取；纯写 HTML 或人工在浏览器查看不触发。
5第二遍独立确认
- [ok] 外部依赖调用点复核（npx playwright / ffmpeg / three.js / gsap） — SKILL.md Verify loop 内确有 `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/iso.html?t=1.2" frame-mid.png`；仓库根 scripts/seek-shot.sh 与 contact-sheet.sh 分别为 npx playwright 与 ffmpeg；reference 第 7 节确有 `import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";` 与 `import gsap from "https://cdn.jsdelivr.net/npm/gsap/+esm";`。四条均落地。
- [ok] 投影主张与代码对账 — `rotateX(60deg) rotateZ(45deg)` 与 reference 给出的 matrix3d 预乘常量（0.707 / 0.409 / 0.816）自洽：cos30≈0.866…、sin30=0.5 与 0.707/0.409 的推导一致，能把地面轴压到屏幕 ±30°；Three.js 用的确为 OrthographicCamera 且 position 三分量相等（10,10,10）→ 经典 iso 视角。未见「用 PerspectiveCamera 冒充 iso」的自相矛盾。
- [ok] 无凭证 / 无 env / 无业务 API 反查 — 两个文档与三个仓库脚本中无 API_KEY/token/secret/.env 读取、无 curl/wget、无 fetch 到业务端点；唯一远程动作是包管理器与 CDN 静态资源。判 orange 的依据是「远程包/镜像」，不含凭据读取。
- [ok] 目录资产面清点 — skills/isometric-animation/ 下仅 SKILL.md（178 行）、references/ 一份 253 行 cookbook、0 字节 README.md；无 scripts/、无模板、无数据文件——「纯指令 + 内联代码片段」结论成立。
- [discrepancy] CDN 依赖的版本纪律差异 — 同一份 reference 内两种取法并存：three.js 钉到 0.160（可复现），gsap 走 `+esm` 浮动入口（上游发新版本即变）。这不是错误，但使「同一份 HTML 长期行为一致」的保证只覆盖 three.js 一侧；已在 verdict.risks 中标注。
- [discrepancy] 跨引用可解析性 — SKILL.md 引用的 `scripts/seek-shot.sh`、`scripts/contact-sheet.sh` 位于仓库根，单装本 skill 目录会悬空（需装整个 repo）；正文把「成为视频的一部分」的路径交回同 repo 的 Remotion 路线（remotion still 验证），该技法的归属 skill（remotion-video）不在本 repo 的 5 个 skill 中。
- [ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 CSS 3D transforms / SVG iso planes / Three.js OrthographicCamera 且强调 no build step；正文 Build-tool choice 与 reference 第 1–7 节逐条兑现，交付确为单文件 HTML（CDN 方式），无夸大。
6结论
适合： 适合把结构关系可视化得有「体量感」的场景：堆叠层/楼层/技术栈塔、挤出块信息图、爆炸视图（拆解与装配）、iso 网格地图式版面，以及需要轻微相机漂移/视差让静图「活起来」的 2.5D 插画；三档实现（CSS 3D / 内联 SVG / Three.js 正交）可按「块数 × 是否需要真遮挡」选型。
不适合： 不适合需要真实透视与景深（电影感相机运动）的场景——它刻意禁止透视；不适合大量动态几何体或物理模拟（应走 Three.js 常规/WebGL 路线，本 skill 只到正交 iso）；也不适合以文字排版为主、几何体极少的版面（用不上它的投影纪律）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload isometric-animation.tar.gz
sha256:
Option B · Copy Guide for Agent0e7ea0aa5a9ac077…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3e2d411b72.