01 功能说明
创建平行投影场景，保持深度和各面的明暗关系一致，按顺序组装，并在固定时间点进行视觉检查。
isometric-animation 以平行投影外观创建分层图、堆叠和爆炸视图。少量 DOM 构成的场景采用 CSS 变换，几何信息图采用 SVG，需要真实遮挡或阴影的场景则使用正交 Three.js 摄影机。
工作流将几何与深度作为检查对象。堆叠应按物理顺序搭建，各个面应遵循同一光照方向，分离的层应能回到正确落位位置。固定时间点预览能暴露错误重叠、表面闪烁和组装不完整等问题。
预期交付物
区分真正等轴测与像素画二等轴测约定。按场景的深度和遮挡需求选择 CSS、SVG 或正交 3D。
保持坐标轴和各面明暗一致。沿深度方向分离各层，并按物理位置安排出现顺序。
冻结起始、部分搭建和最终状态。观看完整动效前，先检查重叠、裁切及各层是否正确落位。
02 适用场景
列出各层及其物理顺序，再选择搭建或拆解再组装序列。选择实现方式前，明确结果需要浏览器交互还是渲染成片。
03 关键决策
由下至上或按物理顺序搭建，有助于观众理解结构。
统一光照和投影，避免各块看起来来自互不相关的图。
共享的间距参数可协调分离与返回位置。
04 示例任务
以下示例任务说明尚未经过测试。使用前请检查该技能的设置。
描述每个组件、排列顺序，以及场景要解释的关系。
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/isometric-animation/SKILL.md下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求；这不是安装命令。
运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。
使用 isometric-animation，为三层应用架构制作网页解释动画：界面、服务层和数据库。采用正交外观、统一光照和清晰标签。从完整组装状态开始，分离各层以展示关系，再让每层返回原位。按实际遮挡需求选择 CSS、SVG 或 Three.js，并解释选择。交付一个支持精确时间定位的 HTML 预览，以及减少动态效果的静态状态。检查中间和最终帧，找出错误深度顺序、标签裁切和无法正确落位的层。根据以下可观察标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。
制作等轴测堆叠、爆炸图和分层网页动画。
由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/isometric-animation/SKILL.md