← Back to Home

3D in 2D

Isometric design uses 120-degree angles to create the illusion of three dimensions on a flat plane, perfect for technical illustrations and game graphics.

Explore Dimensions

Isometric Elements

◊

30° Angle

All elements follow precise 30-degree angles to maintain consistent perspective and depth.

◊

Parallel Lines

Lines remain parallel rather than converging, creating a unique visual style.

◊

Depth Illusion

Creates convincing 3D appearance while remaining completely flat and scalable.

Technical Beauty

Isometric projection has been used for decades in architecture, engineering, and video games. It combines mathematical precision with visual appeal to communicate complex spatial relationships clearly.

Build in Isometric

Start Creating

AI 프롬프트 예제

Claude/Cursor를 사용하여 Isometric 스타일의 컴포넌트를 생성할 때 참고하세요.

요구사항

  • 30도 각도의 등각 투영 (isometric projection)
  • 3D 효과의 2D 그래픽
  • 정확한 기하학적 비율
  • 계층적인 깊이감
  • 명확한 색상 구분
  • 그리드 기반 레이아웃

제약조건

  • SVG 또는 CSS transform 활용
  • 수학적으로 정확한 각도 유지
  • 반응형 디자인 적용
  • 각 면의 skew와 회전 각도 정확히 계산
  • 밝기 차이로 면 구분
  • 접근성 고려한 색상 대비

예상 결과

  • 3D 느낌의 2D 일러스트
  • 정확한 등각 투영
  • 명확한 공간감
  • 기술적이고 전문적인 느낌
  • 게임 그래픽 같은 비주얼
  • 직관적인 구조 표현

프롬프트 템플릿

Isometric 스타일의 3D 큐브 컴포넌트를 만들어줘.

요구사항:
- 30도 각도의 등각 투영 (transform: rotateX, rotateY, rotateZ)
- 큐브의 3면 표현 (top, left, right)
- 각 면마다 다른 색상
- 정확한 기하학적 비율 유지
- CSS transform 활용
- 호버 시 회전 또는 확대 효과

스타일 가이드:
- transform: rotateX(30deg) rotateY(45deg)
- 각 면의 skew와 회전 각도 정확히 계산
- 색상: 밝기 차이로 면 구분 (#ff6b6b, #4ecdc4, #45b7d1)
- box-shadow로 깊이감 추가 (선택사항)

디자인:
- 등각 투영 큐브
- 상단면, 좌측면, 우측면
- 각 면 다른 색상으로 깊이감 표현
- 그리드 레이아웃 가능

수학적으로 정확한 각도, 반응형 디자인 필수해줘.