2.5d-ui
GitHub
코어 CSS · JS 0줄

CSS 프리미티브

Web Components 없이 클래스와 커스텀 속성만으로 블록을 직접 배치합니다. 모든 클래스는 iso-, 모든 변수는 --iso-로 시작하며, 위치·크기는 단위 없는 숫자에 --iso-u를 곱해 씁니다.

블록 하나

면 세 개(.iso-left, .iso-right, .iso-top)와 값·이름 라벨. 장면의 높이와 원점은 직접 정합니다.

격자 바닥과 겹침 순서

뒤에서 앞으로 x + y가 커질수록 --iso-z를 키워야 앞 블록이 뒤 블록을 덮습니다. 가운데 주황 블록에는 .iso-is-active를 걸었습니다.

범주 팔레트

--iso-color-1…--iso-color-6. 다크 테마에서는 토큰 값만 바뀝니다.

클래스

클래스역할
.iso-scene컨테이너. position: relative. --iso-u를 정한다
.iso-origin.iso-scene의 자식. 세계 원점. left: var(--iso-ox, 50%), top: var(--iso-oy, 50%)
.iso-block직육면체. .iso-origin 안에 둔다
.iso-top, .iso-left, .iso-right.iso-block의 면 세 개(이 순서로 마크업하지 않아도 됨)
.iso-label윗면 중심 위에 뜨는 값 텍스트(기울이지 않음)
.iso-label--ground앞 바닥 모서리 아래의 항목 이름
.iso-floor바닥판. .iso-top 면만 쓰며 --iso-h: 0
.iso-grid.iso-floor에 격자선을 더하는 수식 클래스
.iso-is-active강조 상태(호버와 같은 들림 + 윤곽)
.iso-sr-only시각적으로 숨긴 접근성 표

블록 변수

.iso-block과 .iso-floor에 씁니다. 화면 좌표는 X = (x − y)·0.866·u, Y = ((x + y)·0.5 − z)·u입니다.

변수기본값의미
--iso-x, --iso-y0바닥 위치
--iso-w, --iso-d1x, y 방향 크기
--iso-h1높이. @property로 <number> 등록되어 트랜지션된다
--iso-cvar(--iso-color-1)기본색. 왼쪽 면은 --iso-shade-left(18%), 오른쪽 면은 --iso-shade-right(34%)만큼 검정과 섞는다
--iso-z0z-index(정수). 격자 배치에서는 x + y 순서로 증가

토큰

토큰쓰임
--iso-color-1 … -6범주 팔레트
--iso-floor, --iso-grid-line바닥판 색, 격자선 색
--iso-ink, --iso-ink-muted값 라벨, 이름 라벨 글자색
--iso-lift호버·포커스·강조 때 들리는 높이(기본 6px)
--iso-duration높이·들림 트랜지션 시간(기본 180ms)

접근성