transform
요소에 시각적 변형(이동, 회전, 확대/축소)을 적용합니다. 레이아웃 흐름에 영향을 주지 않으므로 애니메이션과 미세 위치 조정에 적합합니다.
클래스 목록
| 클래스 | 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 클래스는 변형 함수의 약어 + 값 + 단위로 구성됩니다.
| 접두사 | 함수 | 단위 | 예시 |
|---|---|---|---|
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보다 성능이 좋습니다.
<!-- 수평 이동 -->
<div class="ttx2rem">오른쪽으로 20px 이동</div>
<!-- 수직 이동 -->
<div class="tty3rem">아래로 30px 이동</div>
<!-- 음수 값 (왼쪽으로) -->
<div class="neg-ttx50p">왼쪽으로 50% 이동</div>
<!-- 절대 중앙 정렬 -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">
정확한 중앙
</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
요소를 지정된 각도만큼 시계 방향으로 회전합니다. 음수 값은 반시계 방향입니다. 아이콘 방향 전환, 화살표 애니메이션 등에 활용합니다.
<!-- 아이콘 회전 -->
<svg class="tr90deg">...</svg>
<!-- 화살표 방향 전환 -->
<span class="tr180deg dib">▲</span>
<!-- 호버 시 회전 -->
<div class="hover-tr180deg tall300msease cp">
호버하면 180도 회전
</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를 각각 지정할 수 있습니다.
<!-- 150% 확대 -->
<img class="ts1-5" src="..." />
<!-- 50% 축소 -->
<div class="ts0-5">작아진 요소</div>
<!-- X축만 2배, Y축 유지 -->
<div class="ts2_1">수평으로만 2배</div>
<!-- 호버 시 살짝 확대 (카드) -->
<div class="hover-ts1-05 tall200msease cp bg18181B p2rem br8px">
호버하면 살짝 커짐
</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)이며, 회전이나 확대/축소의 피벗 포인트를 변경할 때 사용합니다.
<!-- 왼쪽 상단 기준 회전 -->
<div class="tr45deg trotl">왼쪽 위가 피벗</div>
<!-- 오른쪽 하단 기준 확대 -->
<div class="ts1-5 trobr">오른쪽 아래에서 확대</div>
<!-- 기본값 (중앙) -->
<div class="tr90deg troc">중앙 기준 회전</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 효과에 필수입니다.
<!-- 카드 플립 효과용 부모 -->
<div class="pr tsp3d">
<div class="pa w100p h100p">앞면</div>
<div class="pa w100p h100p tr180deg">뒷면</div>
</div>tsf | transform-style: flat |
tsp3d | transform-style: preserve-3d |
호버 조합
transition과 함께 사용하면 부드러운 호버 애니메이션을 만들 수 있습니다.
<!-- 카드 호버 확대 -->
<div class="hover-ts1-1 tall200msease cp bg18181B p2rem br8px">
호버 시 1.1배 확대
</div>
<!-- 버튼 호버 위로 이동 -->
<button class="hover-neg-tty2px tall200msease bg6366F1 cFFFFFF py8px px16px br8px bn cp">
호버 시 살짝 위로
</button>
<!-- 아이콘 호버 회전 -->
<svg class="hover-tr180deg tall300msease cp">...</svg>| 클래스 조합 | 효과 |
|---|---|
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를 조합하면 부모 기준 정확한 중앙 정렬이 가능합니다.
<!-- 부모 요소 (기준점) -->
<div class="pr h20rem">
<!-- 자식 요소 (정확한 중앙) -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">
이 요소는 부모의 정중앙에 위치합니다
</div>
</div>
<!--
원리:
1. pa → 부모 기준 절대 위치
2. t50p l50p → 왼쪽 상단 모서리를 부모의 50% 지점으로
3. neg-ttx50p neg-tty50p → 자신의 크기의 50%만큼 되돌림
결과: 요소의 중심이 부모의 중심과 일치
-->결과 미리보기
팁 & 주의사항
레이아웃에 영향 없음
transform은 시각적으로만 변형합니다. 주변 요소의 위치는 변하지 않습니다. 이 특성 덕분에 애니메이션에서 리플로우가 발생하지 않아 성능이 좋습니다.
translate > top/left
위치 이동 애니메이션에는 top/left 대신 ttx/tty를 사용하세요. GPU 가속으로 60fps 유지가 쉽습니다.
transition 필수
호버 효과에 transform만 적용하면 즉시 전환됩니다. 부드러운 애니메이션을 원하면 반드시 tall200msease 같은 transition 클래스를 함께 사용하세요.
transform-origin 확인
rotate와 scale은 기준점에 따라 결과가 크게 달라집니다. 기본값은 center이며, 모서리 기준 회전이 필요하면 trotl 등을 함께 지정하세요.