transform
요소에 시각적 변형(이동, 회전, 확대/축소)을 적용합니다. 레이아웃 흐름에 영향을 주지 않으므로 애니메이션과 미세 위치 조정에 적합합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
ttx10px | transform: translateX(10px) | 수평으로 10px 이동 |
ttx50p | transform: translateX(50%) | 수평으로 50% 이동 |
neg-ttx50p | transform: translateX(-50%) | 수평으로 -50% 이동 |
tty20px | transform: translateY(20px) | 수직으로 20px 이동 |
tty50p | transform: translateY(50%) | 수직으로 50% 이동 |
neg-tty50p | transform: translateY(-50%) | 수직으로 -50% 이동 |
tr45deg | transform: rotate(45deg) | 시계 방향 45도 회전 |
tr90deg | transform: rotate(90deg) | 시계 방향 90도 회전 |
tr180deg | transform: rotate(180deg) | 180도 회전 (뒤집기) |
ts1-5 | transform: scale(1.5) | 150%로 확대 |
ts0-5 | transform: scale(0.5) | 50%로 축소 |
ts1-5_2 | transform: scale(1.5, 2) | X 1.5배, Y 2배 |
troc | transform-origin: center | 변형 기준점: 중앙 (기본값) |
trot | transform-origin: top | 변형 기준점: 상단 |
tsp3d | transform-style: preserve-3d | 자식 요소 3D 공간 유지 |
tsf | transform-style: flat | 자식 요소 평면 렌더링 |
패턴 구조
transform 클래스는 변형 함수의 약어 + 값 + 단위로 구성됩니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">접두사 | 함수 | 단위 | 예시 |
|---|---|---|---|
ttx | translateX() | px, p(%), rem | ttx10px, ttx50p, ttx2rem |
tty | translateY() | px, p(%), rem | tty20px, tty50p, tty3rem |
tr | rotate() | deg | tr45deg, tr90deg, tr180deg |
ts | scale() | 없음 (소수점은 하이픈) | ts1-5, ts0-5, ts2 |
ts{X}_{Y} | scale(X, Y) | 없음 | ts1-5_2, ts2_0-5 |
음수 값
neg- 접두사를 붙이면 음수 값이 됩니다. 예: neg-ttx50p → translateX(-50%)
시각적 비교
각 transform 함수가 요소에 미치는 효과를 비교합니다. 점선 테두리는 원래 위치입니다.
TranslateX — ttx2rem
오른쪽으로 2rem 이동. 원래 자리(점선)는 그대로 유지됩니다.
TranslateY — tty2rem
아래로 2rem 이동. 주변 요소에 영향을 주지 않습니다.
Rotate 45deg — tr45deg
중심을 기준으로 시계 방향 45도 회전합니다.
Rotate 90deg — tr90deg
90도 회전. 아이콘 방향 전환에 자주 사용합니다.
Scale 1.5 — ts1-5
150% 확대. 원래 공간은 변하지 않습니다.
Scale 0.5 — ts0-5
50% 축소. 여백이 생겨 보이지만 레이아웃은 동일합니다.
유형별 상세
ttxttytranslateX / translateY
요소를 수평(X) 또는 수직(Y) 방향으로 이동합니다. 레이아웃 흐름에 영향을 주지 않아 애니메이션에 적합하며, GPU 가속을 활용하여 top/left보다 성능이 좋습니다.
<!-- Horizontal translate -->
<div class="ttx2rem">Move 20px to the right</div>
<!-- Vertical translate -->
<div class="tty3rem">Move 30px down</div>
<!-- Negative value (to the left) -->
<div class="neg-ttx50p">Move 50% to the left</div>
<!-- Absolute center alignment -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">
Exact center
</div>주요 클래스
ttx10px | transform: translateX(10px) |
ttx50p | transform: translateX(50%) |
ttx2rem | transform: translateX(2rem) |
neg-ttx50p | transform: translateX(-50%) |
neg-ttx10px | transform: translateX(-10px) |
tty10px | transform: translateY(10px) |
tty50p | transform: translateY(50%) |
tty2rem | transform: translateY(2rem) |
neg-tty50p | transform: translateY(-50%) |
neg-tty10px | transform: translateY(-10px) |
trrotate
요소를 지정된 각도만큼 시계 방향으로 회전합니다. 음수 값은 반시계 방향입니다. 아이콘 방향 전환, 화살표 애니메이션 등에 활용합니다.
<!-- Icon rotation -->
<svg class="tr90deg">...</svg>
<!-- Arrow direction switch -->
<span class="tr180deg dib">▲</span>
<!-- Rotate on hover -->
<div class="hover-tr180deg tall300msease cp">
Rotates 180 degrees on hover
</div>주요 클래스
tr45deg | transform: rotate(45deg) |
tr90deg | transform: rotate(90deg) |
tr180deg | transform: rotate(180deg) |
tr270deg | transform: rotate(270deg) |
tr360deg | transform: rotate(360deg) |
neg-tr90deg | transform: rotate(-90deg) |
tsscale
요소를 확대하거나 축소합니다. 1이 원본 크기이며, 1.5는 150%, 0.5는 50%입니다. 언더스코어(_)로 X, Y를 각각 지정할 수 있습니다.
<!-- Scale up 150% -->
<img class="ts1-5" src="..." />
<!-- Scale down 50% -->
<div class="ts0-5">Scaled-down element</div>
<!-- 2x on X-axis only, Y-axis unchanged -->
<div class="ts2_1">Horizontal 2x only</div>
<!-- Slight scale up on hover (card) -->
<div class="hover-ts1-05 tall200msease cp bg18181B p2rem br8px">
Slightly enlarges on hover
</div>주요 클래스
ts0-5 | transform: scale(0.5) |
ts0-75 | transform: scale(0.75) |
ts1 | transform: scale(1) |
ts1-1 | transform: scale(1.1) |
ts1-25 | transform: scale(1.25) |
ts1-5 | transform: scale(1.5) |
ts2 | transform: scale(2) |
ts1-5_2 | transform: scale(1.5, 2) |
tro*transform-origin
변형의 기준점을 지정합니다. 기본값은 요소의 중심(center)이며, 회전이나 확대/축소의 피벗 포인트를 변경할 때 사용합니다.
<!-- Top-left origin rotation -->
<div class="tr45deg trotl">Top left is the pivot</div>
<!-- Bottom-right origin scale -->
<div class="ts1-5 trobr">Scale from bottom right</div>
<!-- Default (center) -->
<div class="tr90deg troc">Center origin rotation</div>전체 클래스
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 |
tsftsp3dtransform-style
자식 요소가 3D 공간에서 렌더링될지 여부를 결정합니다. tsp3d는 카드 플립, 큐브 회전 등 3D 효과에 필수입니다.
<!-- Parent for card flip effect -->
<div class="pr tsp3d">
<div class="pa w100p h100p">Front</div>
<div class="pa w100p h100p tr180deg">Back</div>
</div>tsf | transform-style: flat |
tsp3d | transform-style: preserve-3d |
호버 조합
transition과 함께 사용하면 부드러운 호버 애니메이션을 만들 수 있습니다.
<!-- Card hover scale -->
<div class="hover-ts1-1 tall200msease cp bg18181B p2rem br8px">
Scale to 1.1x on hover
</div>
<!-- Button hover move up -->
<button class="hover-neg-tty2px tall200msease bg6366F1 cFFFFFF py8px px16px br8px bn cp">
Slightly moves up on hover
</button>
<!-- Icon hover rotation -->
<svg class="hover-tr180deg tall300msease cp">...</svg>| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 조합 | 효과 |
|---|---|
hover-ts1-1 tall200msease | 호버 시 1.1배 확대 (카드, 이미지) |
hover-ts1-05 tall200msease | 호버 시 살짝 확대 (버튼, 뱃지) |
hover-neg-tty2px tall200msease | 호버 시 위로 2px 이동 (플로팅 효과) |
hover-tr180deg tall300msease | 호버 시 180도 회전 (아이콘 전환) |
hover-tr90deg tall200msease | 호버 시 90도 회전 |
절대 중앙 정렬 트릭
position: absolute와 translate를 조합하면 부모 기준 정확한 중앙 정렬이 가능합니다.
<!-- Parent element (reference point) -->
<div class="pr h20rem">
<!-- Child element (exact center) -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">
This element is centered within its parent
</div>
</div>
<!--
How it works:
1. pa: absolute position relative to parent
2. t50p l50p: move top-left corner to 50% of parent
3. neg-ttx50p neg-tty50p: pull back by 50% of own size
Result: element center aligns with parent center
-->결과 미리보기
팁 & 주의사항
레이아웃에 영향 없음
transform은 시각적으로만 변형합니다. 주변 요소의 위치는 변하지 않습니다. 이 특성 덕분에 애니메이션에서 리플로우가 발생하지 않아 성능이 좋습니다.
translate > top/left
위치 이동 애니메이션에는 top/left 대신 ttx/tty를 사용하세요. GPU 가속으로 60fps 유지가 쉽습니다.
transition 필수
호버 효과에 transform만 적용하면 즉시 전환됩니다. 부드러운 애니메이션을 원하면 반드시 tall200msease 같은 transition 클래스를 함께 사용하세요.
transform-origin 확인
rotate와 scale은 기준점에 따라 결과가 크게 달라집니다. 기본값은 center이며, 모서리 기준 회전이 필요하면 trotl 등을 함께 지정하세요.