트랜스폼
트랜스폼은 translate, rotate, scale을 단축 클래스로 제공합니다.
Translate
| 클래스 | CSS |
|---|---|
ttx10px | transform: translateX(10px) |
tty20px | transform: translateY(20px) |
ttx50p | transform: translateX(50%) |
neg-ttx50p | transform: translateX(-50%) |
Rotate
| 클래스 | CSS |
|---|---|
tr45deg | transform: rotate(45deg) |
tr90deg | transform: rotate(90deg) |
tr180deg | transform: rotate(180deg) |
Scale
| 클래스 | CSS |
|---|---|
ts1-5 | transform: scale(1.5) |
ts0-5 | transform: scale(0.5) |
ts1-5_2 | transform: scale(1.5, 2) |
음수: neg- 접두사 사용. 예: neg-ttx50p → translateX(-50%)
Transform Origin
| 클래스 | CSS |
|---|---|
troc | transform-origin: center |
trot | transform-origin: top |
trob | transform-origin: bottom |
trol | transform-origin: left |
tror | transform-origin: right |
trotl | transform-origin: top left |
trotr | transform-origin: top right |
trobl | transform-origin: bottom left |
trobr | transform-origin: bottom right |
Transform Style / Perspective
| 클래스 | CSS |
|---|---|
tsf | transform-style: flat |
tsp3d | transform-style: preserve-3d |
per100px | perspective: 100px (패턴: per + 숫자 + 단위) |
poc | perspective-origin: center |
pot | perspective-origin: top |
pob | perspective-origin: bottom |
사용 예시
<!-- 중앙 정렬 (absolute + transform) -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">
절대 중앙
</div>
<!-- 호버 시 확대 -->
<img class="ts1 hover-ts1-1 tall200msease" src="..." />
<!-- 회전 아이콘 -->
<svg class="tr90deg">...</svg>