Design Atlas
한국어
❖ Design styles

Isometric

아이소메트릭

Draw the three axes — width, height, depth — 120° apart with no vanishing point, giving dimensional depth while no direction is foreshortened. A "2.5D" technique.

Also known as: Isometric illustration2.5D
···
html
<div class="scene">
  <div class="cube c1"><svg viewBox="0 0 100 100"><polygon class="top" points="50,10 90,32 50,54 10,32"/><polygon class="left" points="10,32 50,54 50,98 10,76"/><polygon class="right" points="50,54 90,32 90,76 50,98"/></svg></div>
  <div class="cube c2"><svg viewBox="0 0 100 100"><polygon class="top" points="50,10 90,32 50,54 10,32"/><polygon class="left" points="10,32 50,54 50,98 10,76"/><polygon class="right" points="50,54 90,32 90,76 50,98"/></svg></div>
  <div class="cube c3"><svg viewBox="0 0 100 100"><polygon class="top" points="50,10 90,32 50,54 10,32"/><polygon class="left" points="10,32 50,54 50,98 10,76"/><polygon class="right" points="50,54 90,32 90,76 50,98"/></svg></div>
</div>
css
.scene{display:flex;align-items:flex-end;gap:min(5vmin,16px)}
.cube{animation:bob 3.2s ease-in-out infinite}
.cube svg{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.c1{width:min(17vmin,64px);animation-delay:0s}
.c2{width:min(28vmin,108px);animation-delay:.35s}
.c3{width:min(14vmin,52px);animation-delay:.7s}
.c1 .top{fill:#a9c4ff}.c1 .left{fill:#7a9bf0}.c1 .right{fill:#5876cc}
.c2 .top{fill:#ffd08a}.c2 .left{fill:#f2a75a}.c2 .right{fill:#c9843c}
.c3 .top{fill:#8fe0ae}.c3 .left{fill:#5fbf85}.c3 .right{fill:#3d9c66}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8%)}}

Perspective projection draws distant things smaller; isometric projection keeps the scale of all three axes constant instead. It comes from mechanical drafting, where the point was showing a part's proportions accurately without any foreshortening distortion.

That very precision became an appeal for games (SimCity, Diablo) and infographics — buildings or data can look dimensional while staying proportionally consistent top to bottom, which makes many objects easy to compare side by side, like a map. On the web, without real 3D, CSS transform (a rotate+skew combination, or true 3D transforms using rotateX/rotateY) builds a cube's three visible faces — top and two sides — to fake it.

It shows up often in "how our product works" illustrations on marketing sites and SaaS onboarding screens. Building a complex scene by hand is labor-intensive, so it's common for an illustrator to draw it in SVG and let CSS handle only a light animation layer — a bit of rotation, a bit of floating.