Isometric 3D 等距 3D（Isometric 3D）
Isometric 3D renders interface scenes as axonometric block worlds: three axes spaced 120° apart on the picture plane, parallel lines that never converge, and geometric solids built from cubes and extruded planes. It gives depth without perspective distortion, so a dashboard, city, or device cluster reads like a clean architectural model. The look surged in web illustration around 2017–2019 as 'isometric flat design' and remains a go-to language for explaining complex systems at a glance.
等距 3D 把界面场景渲染成轴测方块世界：三条轴线在平面上相隔 120°，平行线永不相交，形体由立方体和拉伸平面构成的干净几何体组成。它在没有透视变形的前提下制造纵深感，让仪表盘、城市或设备集群读起来像一幅整洁的建筑模型。这种观感在 2017–2019 年以「等距扁平风」（isometric flat design）的名义在网页插画里爆发，至今仍是把复杂系统一眼讲清楚的首选视觉语言。
Scope: This entry covers the isometric visual treatment in UI and illustration — block scenes, axonometric angles, and clean geometric depth. It is not true perspective 3D, photorealistic rendering, or the soft rounded inflation of claymorphism.
范围：本条覆盖 UI 与插画里的等距视觉处理——方块场景、轴测角度、干净的几何纵深感。它不包含真正的透视 3D、照片级写实渲染，也不包含黏土拟态那种圆润膨胀的体积感。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
30° axonometric axes30° 轴测轴线 geometry defining定义特征
The three visible axes sit at 120° to one another on the picture plane, commonly drawn as 30° left and right from horizontal; parallel edges stay parallel forever.
三条可见轴线在平面上互成 120°，通常画成左右各偏离水平线 30°；平行边永远保持平行。
-
Orthographic, no vanishing point正交投影，无消失点 depth defining定义特征
There is no perspective convergence — objects do not shrink with distance. A cube in the back is the same size as one in the front, keeping the scene measurable and diagram-like.
没有透视汇聚——远处的物体不会变小。后排的立方体和前排的一样大，场景因此可读且像工程图。
-
Cube and block primitives立方体与方块 primitives geometry defining定义特征
Forms are built from clean extruded rectangles and cubes; surfaces are flat planes meeting at crisp edges, not organic blobs or smooth sculptural shapes.
形体由干净的拉伸矩形和立方体构成；表面是平直面在锐利边缘相交，不是有机团块或光滑雕塑形态。
-
Soft outer cast shadows柔和外投影 depth defining定义特征
Objects float above the ground on soft, diffuse drop shadows (e.g. box-shadow: 16px 24px 40px rgba(0,0,0,.18)) that anchor them in space without simulating a specific light source.
物体靠柔和的漫射 drop shadow 悬浮在地面上方（例如 box-shadow: 16px 24px 40px rgba(0,0,0,.18)），借此锚定在空间里，而非模拟某个特定光源。
-
Flat-shaded surfaces平涂表面 color defining定义特征
Each face is a single flat color or a clean gradient along one axis; there are no noisy textures, photorealistic materials, or complex lighting models.
每个面是单一纯色或沿一个轴向的干净渐变；没有噪点纹理、照片级材质，也没有复杂光照模型。
-
Modular block scenes模块化方块场景 layout supporting辅助特征
Multiple block objects cluster into readable mini-worlds — a city, a workspace, a device farm — where position and stacking imply hierarchy.
多个方块物件聚合成可读的微型世界——城市、工作台、设备群——用位置和堆叠表达层级。
-
Illustration-first usage插画优先的使用场景 imagery supporting辅助特征
In UI the style usually appears in hero graphics, empty states, and onboarding; interactive controls themselves are rare, so the player reads as a placed model rather than a skeuomorphic device.
在 UI 里它通常出现在首图、空状态和引导页；交互控件本身很少见，所以播放器应被读作一个摆置的模型，而非拟物设备。
-
Rounded inflated volume圆润膨胀的体积 surface avoid避免
Puffy rounded corners, inner shadows, and a soft modeling-clay feel push the work into claymorphism — the geometry here is sharp and extruded, not molded.
肥厚的圆角、内阴影和软陶土质感会把作品推向黏土拟态——这里的几何是锐利拉伸的，不是捏塑出来的。
Often confused with: Claymorphism最容易混淆：黏土拟态
Isometric 3D等距 3D（Isometric 3D）
Claymorphism黏土拟态
This is Isometric 3D because the depth comes from angular axonometric geometry — clean cubes, 30° axes, and outer cast shadows — rather than from rounded, inflated, clay-like volume.
这是等距 3D，因为它的纵深感来自角度分明的轴测几何——干净的立方体、30° 轴线和外投影——而不是圆润膨胀的黏土式体积。
It would become claymorphism if the sharp geometric blocks were replaced with soft, rounded, independently colored blobs built from two inner shadows plus one soft outer shadow.
如果把锋利的几何方块换成柔软、圆润、独立上色的团块，并用两层内阴影加一层柔和外投影来构建，就变成黏土拟态了。
In code — optional starting points代码写法 —— 可选起点
Isometric projection for a block container
transform: rotateX(54.7356deg) rotateZ(45deg); transform-style: preserve-3d;Soft cast shadow under a floating block
box-shadow: 16px 24px 40px rgba(0,0,0,.18);Three visible faces of a cube: top, left, right
.face-top { background: #7dd3fc; } .face-left { background: #38bdf8; } .face-right { background: #0ea5e9; }Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using Isometric 3D. Defining signals: axonometric projection with 30° left/right axes (rotateX(54.7356deg) rotateZ(45deg) in CSS or drawn as 120° axis spacing), zero perspective convergence; forms built from clean cubes and extruded rectangles with crisp edges. Palette: sky top faces #7dd3fc, left faces #38bdf8, right faces #0ea5e9, ground #f0f9ff, warm accents #f59e0b / #f472b6; type in a clean geometric sans (Inter, Spline Sans, or system-ui) at 12–14px with #0f172a. Depth: each block casts a soft diffuse outer shadow — box-shadow: 16px 24px 40px rgba(0,0,0,.18) — placed so objects read as floating above the ground; no inner shadows, no bevels, no perspective foreshortening. Layout: assemble a modular mini-scene (a tiny room, city block, or device cluster) where block position implies hierarchy; keep surfaces flat-shaded with one color per face or a single-axis gradient. Do not drift into claymorphism: the decisive difference is sharp geometry with outer cast shadows, not rounded inflated blobs with inner shadows. Preserve 4.5:1 text contrast on every colored face, visible focus states on any interactive block, and honor prefers-reduced-motion by disabling any isometric float/bob animation.
用等距 3D（Isometric 3D）创建这个界面。决定性信号：轴测投影，左右 30° 轴线（CSS 里用 rotateX(54.7356deg) rotateZ(45deg)，或按 120° 轴线间距绘制），零透视汇聚；形体由干净的立方体和拉伸矩形构成，边缘锐利。配色：顶面 #7dd3fc、左侧面 #38bdf8、右侧面 #0ea5e9、地面 #f0f9ff、暖色点缀 #f59e0b / #f472b6；字体用干净的几何无衬线（Inter、Spline Sans 或 system-ui），12–14px，#0f172a。纵深：每个方块投下柔和的漫射外阴影——box-shadow: 16px 24px 40px rgba(0,0,0,.18)——让物体看起来悬浮在地面上方；不要内阴影、不要斜角、不要透视缩短。布局：拼出一个模块化微场景（小房间、城市街区或设备集群），用方块位置表达层级；表面平涂，每个面一色或单轴渐变。不要滑向黏土拟态：关键区别是锐利几何 + 外投影，而不是圆润膨胀团块 + 内阴影。保证每个彩色面上的文字对比度达到 4.5:1，交互方块有可见焦点状态，并尊重 prefers-reduced-motion，关闭任何等距浮动或摇摆动画。
Accessibility & misuse可访问性与误用
Isometric scenes are read as diagrams, but text placed on angled faces can fail contrast and orientation tests. Keep functional text on the top (horizontal) face or on a flat overlay, and verify 4.5:1 against each face color.
等距场景以图解方式被阅读，但放在倾斜面上的文字可能对比度和方向都不达标。把功能性文字放在顶部（水平）面上，或放到扁平覆盖层里，并逐面检查 4.5:1 对比度。
The style relies on depth cues from shadow and position; in forced-colors mode or high-contrast themes those cues vanish — add borders or labels so the hierarchy does not collapse.
这种风格依赖阴影和位置传递纵深感；在强制颜色模式或高对比度主题下这些线索会消失——要补充边框或标签，确保层级不会崩塌。
Motion should be decorative only: any bobbing, parallax, or camera drift must respect prefers-reduced-motion and never be required to understand the interface state.
动效应仅作装饰：任何上下浮动、视差或镜头漂移都必须尊重 prefers-reduced-motion，且不应成为理解界面状态的必要条件。
Origin起源
Isometric projection was formalized as a technical-drawing method in 1822 by the British engineer William Farish, and it became the standard for mechanical and architectural illustration because it preserves true proportions without perspective distortion. Video-game designers adopted it independently to show environment and action at once, from SimCity (1989) and Age of Empires (1997) to mobile titles like Monument Valley (2014). In UI and web design the 'isometric flat' illustration wave rose around 2017–2019 as landing pages and onboarding flows used block worlds to make complex products feel tangible.
等距投影作为工程制图方法由英国工程师 William Farish 在 1822 年正式提出，并因能保留真实比例、不产生透视变形而成为机械与建筑插图的标准。电子游戏设计师独立地采用它，以便同时展现场景与动作，从《模拟城市》（1989）、《帝国时代》（1997）到移动端代表作《纪念碑谷》（2014）皆是如此。在 UI 与网页设计领域，「等距扁平」插画风潮在 2017–2019 年左右兴起，落地页和引导流程用方块世界把复杂产品变得可触可感。